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 MoneyBackGuarantee from "../../components/MoneyBackGuarantee";
import PalmsSayAbout from "../../components/PalmsSayAbout";
import { useCallback, useEffect, useMemo } 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 { useApi, useApiCall, User } from "@/api";
import { useFunnel } from "@/hooks/funnel/useFunnel";

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

function TrialPayment() {
  const api = useApi();
  const token = useSelector(selectors.selectToken);
  const dispatch = useDispatch();
  const { translate } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);
  const { products, trialInterval } = useFunnel({
    funnel: ELocalesPlacement.PalmistryV1,
    paymentPlacement: "main"
  });
  const activeProduct = products[0]

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

  const openPaymentModal = () => {
    navigate(routes.client.palmistryV2PaymentModal());
  };

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

  const { data: user } = useApiCall<User.IUser | null>(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 (
    <>
      <div className={styles.background} />
      <div className={styles.header}>
        <Title className={styles.title}>
          {translate("trial-payment.transform_your_life")}
        </Title>
        <img src={images("hand.svg")} alt="Hand" />
      </div>
      <div className={styles.discount}>
        <DiscountExpires />
        <Button className={styles.button} onClick={openPaymentModal}>
          {translate("trial-payment.get_trial_days", { days: trialInterval })}
        </Button>
      </div>
      <Title className={styles.title}>
        {translate("trial-payment.personalized_reading_ready")}
      </Title>
      <PaymentTable
        product={activeProduct}
        gender={gender}
        placementKey={placementKey}
        buttonClick={openPaymentModal}
        trialInterval={trialInterval}
      />
      <MoneyBackGuarantee />
      <Title className={styles["title-hands"]}>
        {translate("trial-payment.hands_reveal_title")}
      </Title>
      <p className={styles["text-hands"]}>
        {translate("trial-payment.hands_reveal_description")}
      </p>
      <PalmsSayAbout />
      <Title className={styles["title-prepare"]}>
        {translate("trial-payment.prepare_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"]}>
        {translate("trial-payment.aura_users_stories")}
      </Title>
      <Reviews />
      <Title className={styles["title-featured"]}>
        {translate("trial-payment.as_featured_in")}
      </Title>
      <div className={styles["featured-container"]}>
        <img src={images("featured.svg")} alt="Featured" />
      </div>
      <Address />
    </>
  );
}

export default TrialPayment;
