import React from "react";

import { useNavigate } from "react-router-dom";
import { Elements } from "@stripe/react-stripe-js";
import { Stripe, loadStripe } from "@stripe/stripe-js";

import "./premium-bundle-screen.css";

import routes from "@/routes";
import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
import { useApi } from "@/api";
import { useAuth } from "@/auth";
import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
import { ResponseGet } from "@/api/resources/SinglePayment";
import Loader, { LoaderColor } from "@/components/Loader";
import {useSelector} from "react-redux";
import {selectors} from "@/store";
import {addCurrency} from "@/locales";


const currentProductKey = "premium.bundle.aura";
const returnUrl = window.location.host;

export default function PremiumBundleScreen() {
  const navigate = useNavigate();
  const { token, user } = useAuth();
  const api = useApi();

  const [stripePromise, setStripePromise] =
    React.useState<Promise<Stripe | null> | null>(null);
  const [product, setProduct] = React.useState<ResponseGet>();
  const [isSuccess] = React.useState(false);
  const [clientSecret, setClientSecret] = React.useState<string | null>(null);
  const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
  const [isLoading, setIsLoading] = React.useState(false);
  const currency = useSelector(selectors.selectCurrency);

  React.useEffect(() => {
    (async () => {
      const products = await api.getSinglePaymentProducts({ token });

      const product = products.find(
        (product) => product.key === currentProductKey
      );

      if (product) {
        setProduct(product);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  React.useEffect(() => {
    if (!stripePublicKey) return;

    setStripePromise(loadStripe(stripePublicKey));
  }, [stripePublicKey]);

  const buy = async () => {
    if (!user?.id || !product) return;

    const { _id, key } = product;

    try {
      setIsLoading(true);
      const response = await api.createSinglePayment({
        token: token,
        data: {
          user: {
            id: user.id,
            email: user.email,
            name: user.username || "",
            sign: user.profile?.sign?.sign || "",
            age: user.profile.age?.years || 0,
          },
          partner: {
            sign: "",
            age: 0,
          },
          paymentInfo: {
            productId: _id,
            key,
          },
          return_url: returnUrl,
        },
      });

      if (
        ("paymentIntent" in response &&
          response.paymentIntent.status === "paid") ||
        ("payment" in response && response.payment.status === "paid") ||
        ("invoiceId" in response && response.invoiceId === "paid")
      ) {
        goHome();
      } else if ("paymentIntent" in response) {
        setClientSecret(response.paymentIntent.data.client_secret);
        setStripePublicKey(response.paymentIntent.data.public_key);
      }
    } catch (error) {
      console.log("Error: ", error);
    } finally {
      setIsLoading(false);
    }
  };

  const goHome = () => {
    navigate(routes.client.home());
  };

  return (
    <div className="premium-bundle-screen">
      <div className="premium-bundle-screen__header">
        <HeaderLogo />
      </div>

      <div className="premium-bundle-screen__content">
        <button className="premium-bundle-screen__button-skip" onClick={goHome}>
          Skip &gt;
        </button>

        <span className="premium-bundle-screen__title">
          Get extra insights with our Premium Bundle
        </span>

        <span className="premium-bundle-screen__subtitle">
          Exclusive offer: recommended for get more insights about what future
          holds for you.
        </span>

        <div className="premium-bundle-screen__block-description">
          <span className="premium-bundle-screen__list-title">
            What your Premium Bundle will include:
          </span>

          <div className="premium-bundle-screen__item">
            <div className="premium-bundle-screen__icon">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g clipPath="url(#clip0_840_6840)">
                  <path
                    d="M19.4064 7.01573L15.4441 6.43996L13.672 2.84952C12.9876 1.46263 11.0085 1.46306 10.3243 2.84948L8.55231 6.43992L4.59001 7.01573C3.0594 7.2381 2.44844 9.12037 3.55553 10.1996L6.42269 12.9944L5.74586 16.9406C5.48444 18.465 7.08564 19.6277 8.45425 18.9084L11.9982 17.0451L15.5423 18.9084C16.909 19.6268 18.512 18.4648 18.2507 16.9406L17.5738 12.9944L20.441 10.1996C21.5483 9.11995 20.9363 7.23806 19.4064 7.01573ZM19.324 9.0539L16.1557 12.1422C15.9672 12.326 15.8812 12.5908 15.9257 12.8503L16.6736 17.2111C16.7111 17.4301 16.4833 17.5955 16.2867 17.4922L12.3704 15.4334C12.1374 15.3109 11.8589 15.3109 11.6259 15.4334L7.70964 17.4922C7.51295 17.5956 7.28519 17.4301 7.32273 17.2111L8.07067 12.8503C8.11516 12.5908 8.02914 12.326 7.84061 12.1422L4.67228 9.0539C4.51314 8.89879 4.60019 8.63104 4.82008 8.59902L9.19858 7.96279C9.45911 7.92491 9.68439 7.76132 9.80092 7.52521L11.7591 3.55757C11.8574 3.35845 12.139 3.35831 12.2373 3.55762L14.1955 7.52521C14.312 7.76132 14.5373 7.92496 14.7978 7.96279L19.1763 8.59902C19.3961 8.63104 19.4831 8.89884 19.324 9.0539Z"
                    fill="#FF9649"
                  />
                  <path
                    d="M6.31805 2.21025L5.36128 0.893391C5.1015 0.536016 4.60125 0.456703 4.24388 0.716484C3.88646 0.976172 3.80719 1.47647 4.06692 1.83389L5.02369 3.1507C5.28357 3.50827 5.78381 3.58725 6.1411 3.32761C6.49852 3.06797 6.57778 2.56767 6.31805 2.21025Z"
                    fill="#FF9649"
                  />
                  <path
                    d="M3.13954 14.0113C3.00309 13.5911 2.55177 13.361 2.13149 13.4977L0.551992 14.0109C0.131805 14.1475 -0.0981173 14.5987 0.0383827 15.019C0.175117 15.4399 0.62718 15.669 1.04643 15.5326L2.62593 15.0194C3.04616 14.8828 3.27609 14.4315 3.13954 14.0113Z"
                    fill="#FF9649"
                  />
                  <path
                    d="M19.7573 0.716518C19.3999 0.456831 18.8996 0.536002 18.6399 0.893424L17.6831 2.21024C17.4234 2.56766 17.5027 3.068 17.8601 3.32764C18.2176 3.58742 18.7179 3.50802 18.9775 3.15074L19.9342 1.83392C20.1939 1.4765 20.1147 0.976159 19.7573 0.716518Z"
                    fill="#FF9649"
                  />
                  <path
                    d="M23.4452 14.0109L21.8658 13.4977C21.4456 13.3609 20.9943 13.5911 20.8577 14.0113C20.7212 14.4315 20.9511 14.8829 21.3713 15.0194L22.9508 15.5326C23.3701 15.669 23.8221 15.4398 23.9588 15.019C24.0954 14.5988 23.8654 14.1475 23.4452 14.0109Z"
                    fill="#FF9649"
                  />
                  <path
                    d="M12.0021 20.2128C11.5603 20.2128 11.2021 20.5709 11.2021 21.0127V22.6364C11.2021 23.0782 11.5603 23.4364 12.0021 23.4364C12.4439 23.4364 12.8021 23.0782 12.8021 22.6364V21.0127C12.8021 20.5709 12.4439 20.2128 12.0021 20.2128Z"
                    fill="#FF9649"
                  />
                </g>
                <defs>
                  <clipPath id="clip0_840_6840">
                    <rect width="24" height="24" fill="white"></rect>
                  </clipPath>
                </defs>
              </svg>
            </div>

            <p>Guide to Modern Astrology</p>
          </div>

          <div className="premium-bundle-screen__item">
            <div className="premium-bundle-screen__icon">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g clipPath="url(#clip0_840_6862)">
                  <path
                    d="M21.0843 1.45852C20.8093 0.613031 20.0141 0 19.0781 0C18.1615 0 17.3799 0.587906 17.0897 1.40625H13.9884C13.6982 0.587906 12.9166 0 12 0C11.0834 0 10.3018 0.587906 10.0116 1.40625H6.91031C6.62006 0.587906 5.83852 0 4.92188 0C3.98587 0 3.19073 0.613031 2.91572 1.45852C1.26216 1.74413 0 3.18792 0 4.92188V21.8906C0 23.0537 0.946266 24 2.10938 24H21.8906C23.0537 24 24 23.0537 24 21.8906V4.92188C24 3.18792 22.7378 1.74413 21.0843 1.45852ZM18.375 2.10938C18.375 1.72167 18.6904 1.40625 19.0781 1.40625C19.4658 1.40625 19.7812 1.72167 19.7812 2.10938V3.51562C19.7812 3.90333 19.4658 4.21875 19.0781 4.21875C18.6904 4.21875 18.375 3.90333 18.375 3.51562V2.10938ZM11.2969 2.10938C11.2969 1.72167 11.6123 1.40625 12 1.40625C12.3877 1.40625 12.7031 1.72167 12.7031 2.10938V3.51562C12.7031 3.90333 12.3877 4.21875 12 4.21875C11.6123 4.21875 11.2969 3.90333 11.2969 3.51562V2.10938ZM4.21875 2.10938C4.21875 1.72167 4.53417 1.40625 4.92188 1.40625C5.30958 1.40625 5.625 1.72167 5.625 2.10938V3.51562C5.625 3.90333 5.30958 4.21875 4.92188 4.21875C4.53417 4.21875 4.21875 3.90333 4.21875 3.51562V2.10938ZM22.5938 21.8906C22.5938 22.2783 22.2783 22.5938 21.8906 22.5938H2.10938C1.72167 22.5938 1.40625 22.2783 1.40625 21.8906V8.48438H22.5938V21.8906ZM22.5938 7.07812H1.40625V4.92188C1.40625 4.00523 1.99411 3.22369 2.8125 2.93344V3.51562C2.8125 4.67873 3.75877 5.625 4.92188 5.625C6.08498 5.625 7.03125 4.67873 7.03125 3.51562V2.8125H9.89062V3.51562C9.89062 4.67873 10.8369 5.625 12 5.625C13.1631 5.625 14.1094 4.67873 14.1094 3.51562V2.8125H16.9688V3.51562C16.9688 4.67873 17.915 5.625 19.0781 5.625C20.2412 5.625 21.1875 4.67873 21.1875 3.51562V2.93344C22.0059 3.22369 22.5938 4.00523 22.5938 4.92188V7.07812Z"
                    fill="#FF9649"
                  />
                  <path
                    d="M9.34435 14.2438L11.091 12.4972C11.5319 12.0562 11.2198 11.2969 10.5938 11.2969H6.375C5.98669 11.2969 5.67188 11.6117 5.67188 12C5.67188 12.3883 5.98669 12.7031 6.375 12.7031H8.89628L7.2841 14.3153C6.8431 14.7563 7.15524 15.5156 7.78126 15.5156H8.48438C9.25979 15.5156 9.89064 16.1465 9.89064 16.9219C9.89064 17.6973 9.25979 18.3281 8.48438 18.3281C7.70898 18.3281 7.07813 17.6973 7.07813 16.9219C7.07813 16.5336 6.76332 16.2188 6.375 16.2188C5.98669 16.2188 5.67188 16.5336 5.67188 16.9219C5.67188 18.4727 6.93357 19.7344 8.48438 19.7344C10.0352 19.7344 11.2969 18.4727 11.2969 16.9219C11.2969 15.6708 10.4759 14.608 9.34435 14.2438Z"
                    fill="#FF9649"
                  />
                  <path
                    d="M19.0312 18.3283H16.9219V12.0001C16.9219 11.3766 16.1641 11.0602 15.7216 11.503L12.9091 14.3155C12.6345 14.5901 12.6345 15.0352 12.9091 15.3098C13.1836 15.5844 13.6289 15.5844 13.9035 15.3098L15.5156 13.6976V18.3283H13.4062C13.0179 18.3283 12.7031 18.6431 12.7031 19.0314C12.7031 19.4197 13.0179 19.7345 13.4062 19.7345H19.0312C19.4196 19.7345 19.7344 19.4197 19.7344 19.0314C19.7344 18.6431 19.4196 18.3283 19.0312 18.3283Z"
                    fill="#FF9649"
                  />
                </g>
                <defs>
                  <clipPath id="clip0_840_6862">
                    <rect width="24" height="24" fill="white"></rect>
                  </clipPath>
                </defs>
              </svg>
            </div>

            <p>Annual Forecast for 2024</p>
          </div>

          <div className="premium-bundle-screen__subsection">
            <span className="premium-bundle-screen__one-time-price">
              One-time price of {addCurrency(19, currency)}!
            </span>
            <p>Original price is {addCurrency(45, currency)}. Save 58%!</p>
          </div>

          <div className="premium-bundle-screen__subsection">
            <p>
              These plans are <b>yours to keep</b> even if you decide Hint isn’t
              right for you.
            </p>
          </div>
        </div>

        <button
          className="premium-bundle-screen__button premium-bundle-screen__button-active premium-bundle-screen__buy-button"
          onClick={buy}
          disabled={isLoading}
        >
          {isLoading ? (
            <Loader
              color={LoaderColor.White}
              className="discount-screen__loader"
            />
          ) : (
            <>
              <svg
                width="13"
                height="16"
                viewBox="0 0 13 16"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M11.5556 6.24219H1.44444C0.6467 6.24219 0 6.97481 0 7.87855V13.6058C0 14.5096 0.6467 15.2422 1.44444 15.2422H11.5556C12.3533 15.2422 13 14.5096 13 13.6058V7.87855C13 6.97481 12.3533 6.24219 11.5556 6.24219Z" />
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M6.5 0.242188C4.29086 0.242188 2.5 2.03305 2.5 4.24219V8.24219H10.5V4.24219C10.5 2.03305 8.70914 0.242188 6.5 0.242188ZM6.5 1.24219C4.84315 1.24219 3.5 2.58533 3.5 4.24219V7.24219H9.5V4.24219C9.5 2.58533 8.15685 1.24219 6.5 1.24219Z"
                />
              </svg>{" "}
              Buy now
            </>
          )}
        </button>
      </div>

      {stripePromise && clientSecret && (
        <div
          className={`discount-screen__widget${
            isSuccess ? " discount-screen__widget_success" : ""
          }`}
        >
          <Elements stripe={stripePromise} options={{ clientSecret }}>
            <CheckoutForm returnUrl={returnUrl} />
          </Elements>

          {isSuccess && (
            <div className="discount-screen__success">
              <svg
                className="discount-screen__success-icon"
                xmlns="http://www.w3.org/2000/svg"
                width="512"
                height="512"
                viewBox="0 0 52 52"
              >
                <path
                  fill="#4ec794"
                  d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329-16 18a1.997 1.997 0 0 1-2.745.233l-10-8a2 2 0 0 1 2.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 0 1 2.99 2.659z"
                />
              </svg>

              <div className="discount-screen__success-text">
                Payment success
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}