import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { images, sprites } from "../../data";
import ChooseGender from "../../components/ChooseGender";
import Partners from "../../components/Partners";
import Feedback from "../../components/Feedback";
import HowItWorks from "../../components/HowItWorks";
import Summary from "../../components/Summary";
import Astrologers from "../../components/Astrologers";
import Button from "../../ui/Button";
import Address from "../../components/Address";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useRef } from "react";
import { useSession } from "@/hooks/session/useSession";
import { EGender, ESourceAuthorization } from "@/api/resources/User";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function Welcome() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const { createSession, updateSession } = useSession();
  const navigate = useNavigate();
  const genderScrollRef = useRef<HTMLDivElement>(null);

  const handleNext = async (gender: string) => {
    const session = await createSession(ESourceAuthorization["aura.chats"]);
    if (session?.sessionId?.length) {
      await updateSession(
        {
          profile: {
            gender: EGender[gender as keyof typeof EGender],
          },
        },
        ESourceAuthorization["aura.chats"],
        session.sessionId
      );
    }
    navigate(routes.client.chatsQuizPsychicReading());
  };

  const scrollToGender = () => {
    genderScrollRef?.current?.scrollIntoView({
      behavior: "smooth",
    });
  };

  return (
    <section className={styles.container}>
      <Title className={styles.title} variant="h2">
        {translate("/welcome.title_1", {
          br: <br />,
        })}
      </Title>
      <p className={styles.text}>
        {translate("/welcome.text_1", {
          br: <br />,
        })}
      </p>
      <ul className={styles.list}>
        <li className={styles.item}>
          <svg aria-hidden="true" width="16px" height="16px">
            <use xlinkHref={`${sprites}#lock`}></use>
          </svg>
          <span className={styles["item-text"]}>
            {translate("/welcome.guaranteed_privacy")}
          </span>
        </li>
        <li className={styles.item}>
          <div className={styles["check-wrapper"]}>
            <svg aria-hidden="true" width="16px" height="16px">
              <use xlinkHref={`${sprites}#check`}></use>
            </svg>
          </div>
          <span className={styles["item-text"]}>
            {translate("/welcome.verified_psychics")}
          </span>
        </li>
      </ul>
      <div ref={genderScrollRef} />
      <ChooseGender onSelectGender={handleNext} />
      <Partners />
      <Feedback />
      <HowItWorks onButtonClick={scrollToGender} />
      <Summary />
      <Astrologers onButtonClick={scrollToGender} />
      <div className={styles.footer}>
        <Title variant="h2" className={styles.title}>
          {translate("/welcome.title_6")}
        </Title>
        <img src={images("smile-people.webp")} alt="smile people" />
        <Button onClick={scrollToGender} />
        <Address />
      </div>
    </section>
  );
}

export default Welcome;
