import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useNavigate, useSearchParams } from "react-router-dom";
import routes from "@/routes";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function GetInformationPartnerPage() {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const path = searchParams.get("path");

  const handleBack = () => {
    if (path === "palmistry") {
      return navigate(routes.client.palmistryV1SkipTrial());
      // return navigate(routes.client.addGuides());
    }
    if (path === "compatibility") {
      return navigate(routes.client.compatibilityV2SkipTrial());
    }
    navigate(routes.client.addConsultationV1());
  };

  const handleNext = () => {
    if (path === "palmistry") {
      return navigate(
        `${routes.client.palmistryOnboardingV1()}?path=palmistry`
      );
    }
    if (path === "compatibility") {
      return navigate(`${routes.client.palmistryOnboardingV1()}?path=compatibility`);
    }
    navigate(routes.client.home());
  };

  return (
    <section className={`${styles.page} page`}>
      <video
        className={styles["background-video"]}
        loop={false}
        autoPlay={true}
        muted={true}
        playsInline={true}
      >
        <source src="/videos/background-video-1.mp4" type="video/mp4" />
        <source src="/videos/background-video-1.mp4" type="video/ogg" />
        Your browser does not support the video tag.
      </video>
      <Title variant="h2" className={styles.title}>
        {translate("app_name")}
      </Title>
      <div className={styles["bottom-container"]}>
        <Title variant="h3" className={styles.subtitle}>
          {translate("/get-information-partner.title")}
        </Title>
        <p className={styles.description}>
          {translate("/get-information-partner.description")}
        </p>
        <div className={styles["buttons-container"]}>
          <MainButton
            onClick={handleBack}
            className={`${styles.button} ${styles["back-button"]}`}
          >
            {translate("back")}
          </MainButton>
          <MainButton
            onClick={handleNext}
            className={`${styles.button} ${styles["next-button"]}`}
          >
            {translate("next")}
          </MainButton>
        </div>
      </div>
    </section>
  );
}

export default GetInformationPartnerPage;