import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import WheelPathHeader from "../../components/WheelPathHeader";
import Button from "../../components/Button";
import SpecialOfferBanner from "../../components/SpecialOfferBanner";
import { copyToClipboard } from "@/services/data";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { useFunnel } from "@/hooks/funnel/useFunnel";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";

function SpecialOffer() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const { products } = useFunnel({
    funnel: ELocalesPlacement.CompatibilityV2,
    paymentPlacement: "main",
  });

  const handleNext = () => {
    copyToClipboard("HAIR50");
    navigate(routes.client.compatibilityV2TrialPayment());
  };

  useEffect(() => {
    dispatch(
      actions.payment.update({
        activeProduct: products[0],
      })
    );
  }, [dispatch, products]);

  return (
    <div className={styles.container}>
      <WheelPathHeader />
      <Title variant="h1" className={styles.title}>
        {translate("/special-offer.title")}
      </Title>

      <p className={styles.description}>
        {translate("/special-offer.description")}
      </p>

      <SpecialOfferBanner handleCopyCode={handleNext} />

      <Button className={styles.button} onClick={handleNext}>
        {translate("/special-offer.button")}
      </Button>
    </div>
  );
}

export default SpecialOffer;
