import styles from "./styles.module.scss";
import Title from "@/components/Title";
import Button from "../../components/Button";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";
// import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { images } from "../../data";
import DiscountExpires from "../../components/DiscountExpires";
import PaymentTable from "../../components/PaymentTable";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import MoneyBackGuarantee from "../../components/MoneyBackGuarantee";
import PalmsSayAbout from "../../components/PalmsSayAbout";
import { useCallback, useEffect, useMemo, useState } from "react";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import WithPartnerInformation from "../../components/WithPartnerInformation";
import PersonalInformation from "../../components/PersonalInformation";
import Reviews from "../../components/Reviews";
import Address from "../../components/Address";
import Modal from "@/components/Modal";
import PaymentForm from "@/components/Payment/nmi/PaymentForm";
import { useApi, useApiCall, User } from "@/api";

const placementKey = EPlacementKeys["aura.placement.email.palmistry"];

function TrialPayment() {
  const api = useApi();
  const token = useSelector(selectors.selectToken);
  const dispatch = useDispatch();
  // const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const { products } = usePaywall({
    placementKey,
    localesPlacement: ELocalesPlacement.PalmistryV1,
  });
  const activeProduct = products[0]

  const trialDuration = activeProduct?.trialDuration || 7;

  const {
    gender,
    birthPlace,
    partnerBirthPlace,
    partnerBirthdate,
    partnerGender,
    birthdate,
  } = useSelector(selectors.selectQuestionnaire)
  const zodiacSign = getZodiacSignByDate(birthdate);
  const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
  const navigate = useNavigate();

  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);

  const onPaymentSuccess = () => {
    return navigate(routes.client.paymentSuccess())
  }

  const onModalClosed = () => {
    setIsPaymentModalOpen(false);
    return handleDiscount()
  }

  const handleDiscount = () => {
    navigate(routes.client.palmistryV2SaveOff());
  };

  const onPaymentError = () => {
    return navigate(routes.client.paymentFail())
  }

  const openPaymentModal = () => {
    setIsPaymentModalOpen(true);
  };

  const userData = useCallback(async () => {
    const { user } = await api.getMe({ token: token });
    return user;
  }, [api]);

  const { data: user } = useApiCall<User.IUser>(userData);

  const singleOrWithPartner = useMemo(() => {
    return user?.partner ? "partner" : "single";
  }, [user]);

  useEffect(() => {
    if (!activeProduct) return;
    dispatch(actions.payment.update({
      activeProduct
    }))
  }, [activeProduct])

  if (!activeProduct) return null;


  return (
    <>
      <Modal containerClassName={styles.modal} open={isPaymentModalOpen} onClose={onModalClosed}>
        <PaymentForm
          placementKey={placementKey}
          onPaymentError={onPaymentError}
          onPaymentSuccess={onPaymentSuccess}
        />
      </Modal>
      <div className={styles.background} />
      <div className={styles.header}>
        <Title className={styles.title}>
          Transform your <br />
          life with the Power <br />
          of Palmistry — Get your
          personalized plan today
        </Title>
        <img src={images("hand.svg")} alt="Hand" />
      </div>
      <div className={styles.discount}>
        <DiscountExpires />
        <Button className={styles.button} onClick={openPaymentModal}>
          GET {trialDuration}-day trial
        </Button>
      </div>
      <Title className={styles.title}>
        Personalized Palmistry <br />
        Reading is ready!
      </Title>
      <PaymentTable
        product={activeProduct}
        gender={gender}
        placementKey={placementKey}
        buttonClick={openPaymentModal}
      />
      <MoneyBackGuarantee />
      <Title className={styles["title-hands"]}>
        What your hands and fingers can reveal about you
      </Title>
      <p className={styles["text-hands"]}>
        Your hands and fingers are like a personal storybook, with each line
        representing a chapter of your life.
      </p>
      <PalmsSayAbout />
      <Title className={styles["title-prepare"]}>
        We will prepare your
        personalized plan
      </Title>
      {singleOrWithPartner === "partner" && (
        <WithPartnerInformation
          zodiacSign={zodiacSign}
          gender={gender}
          birthPlace={birthPlace}
          birthdate={birthdate}
          partnerBirthPlace={partnerBirthPlace}
          partnerBirthDate={partnerBirthdate}
          partnerGender={partnerGender}
          partnerZodiacSign={partnerZodiacSign}
        />
      )}
      {singleOrWithPartner === "single" && (
        <PersonalInformation
          zodiacSign={zodiacSign}
          gender={gender}
          birthPlace={birthPlace}
          birthdate={birthdate}
        />
      )}
      <Title className={styles["title-reviews"]}>
        Here are a few stories from
        AURA Users
      </Title>
      <Reviews />
      <Title className={styles["title-featured"]}>
        As featured in
      </Title>
      <div className={styles["featured-container"]}>
        <img src={images("featured.svg")} alt="Featured" />
      </div>
      <Address />
    </>
  );
}

export default TrialPayment;
