import React, { useState } from "react";
import ButtonSecondary from "../Input/ButtonSecondary";
import Divider from "@material-ui/core/Divider";
import axios from "axios";
import { useDispatch, useSelector } from "react-redux";
import { notification, refreshUserData } from "../../actions";
import { backend } from "../../config.js";
import { showBackdrop, hideBackdrop } from "../../actions/toggles";
import PaymentDialog from "../Dialogs/PaymentDialog";
import { openInNewTab, formatDateBasic } from "../../Services.js";
import LocalOfferIcon from '@material-ui/icons/LocalOffer';

export default function EditRestaurantSubscription(props) {
  const { subscriptionActive, subscriptionDue } = props.restaurant;
  const initialState = {
    transactionId: "",
    open: false,
  };
  const [state, setState] = useState(initialState);
  const userData = useSelector((state) => state.data.userData);
  const token = userData.jwt;
  const dispatch = useDispatch();

  const handleActivateSubscription = (type) => {
    const data = {
      restaurantId: props.restaurant._id,
      userData: {
        firstname: userData.firstname,
        lastname: userData.lastname,
        userId: userData.userId,
        userEmail: userData.userEmail,
        NIP: userData.billing.NIP,
        adress: userData.billing.adress,
        companyName: userData.billing.companyName,
      },
      type: type,
    };
    dispatch(showBackdrop());
    axios({
      method: "POST",
      url: backend + "restaurant/subscription",
      data: data,
      headers: {
        "x-auth-token": token,
      },
    })
      .then((response) => {
        dispatch(hideBackdrop());
        if (response.status === 200) {
          setState({ ...state, open: true });
        } else {
          dispatch(notification("Wystąpił błąd, spróbuj ponownie.", "error"));
        }
      })
      .catch((error) => {
        dispatch(hideBackdrop());
        dispatch(notification("Wystąpił błąd, spróbuj ponownie.", "error"));
        throw error;
      });
  };

  const onCancel = () => {
    setState({ ...state, open: false });
  };

  const onAccept = () => {
    dispatch(refreshUserData());
    openInNewTab("https://secure.przelewy24.pl/trnRequest/0");
  };

  return (
    <div className="editSubscription-tab">
      <PaymentDialog open={state.open} cancel={onCancel} accept={onAccept} />
      <div className="subscription-text">
        <h3>Subskrypcja</h3>
        {subscriptionActive ? (
          <h5>Aktywna do: {formatDateBasic(subscriptionDue)}</h5>
        ) : (
          <h5>Nieaktywna</h5>
        )}
      </div>
      {!subscriptionActive && (
        <div className="subscription-content">
          <p>
            Aktywuj subskrypcję, aby Twoja restauracja była widoczna. Na tydzień
            przed końcem subskrypcji wyślemy Ci email z możliwością opłacenia
            subskrypcji na kolejny okres.
          </p>
          <div className="subscription-cards">
            <div className="subscription-card">
              <div className="subscription-title">
                <LocalOfferIcon/>
                <h1>Za darmo</h1>
              </div>
              <Divider style={{ width: "100%" }} />
              <h2>3 miesiące</h2>
              <div className="subscription-desc">
<p>Możesz jednorazowo aktywować darmowe 3 miesiące subskrypcji, by móc spokojnie uzupełnić menu.</p>
              </div>
              <Divider style={{ width: "100%" }} />
              <ButtonSecondary
                text="Aktywuj"
                onClick={() => handleActivateSubscription(3)}
              />
            </div>
            <div className="subscription-card">
              <div className="subscription-title">
                <LocalOfferIcon/>
                <h1>50zł</h1>
              </div>
              <Divider style={{ width: "100%" }} />
              <h2>1 miesiąc</h2>
              <div className="subscription-desc">
                <p>Aktywuj subskrypcję na jeden miesiąc.</p>
              </div>
              <Divider style={{ width: "100%" }} />
              <ButtonSecondary
                text="Aktywuj"
                onClick={() => handleActivateSubscription(1)}
              />
            </div>
            <div className="subscription-card">
              <div className="subscription-title">
                <LocalOfferIcon/>
                <h1>500zł</h1>
              </div>
              <Divider style={{ width: "100%" }} />
                <h2>1 rok</h2>
                <div className="subscription-desc">
                  <p>Zapłać z góry za cały rok, a otrzymasz dwa miesiące w prezencie.</p>
                </div>
              <Divider style={{ width: "100%" }} />
              <ButtonSecondary
                text="Aktywuj"
                onClick={() => handleActivateSubscription(12)}
              />
            </div>
          </div>
        </div>
      )}
      {subscriptionActive && (
        <p>
          Subskrypcja jest aktywna - Twoja restauracja jest dostępna do
          przeglądania dla użytkowników. Jeżeli chcesz żeby restauracja była
          niewidoczna, przejdź do zakładki "Informacje"
        </p>
      )}
    </div>
  );
}