import { IAnswer, aboutUsAnswers } from "@/data";
import styles from "./styles.module.css";
import Title from "@/components/Title";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import {useNavigate, useSearchParams} from "react-router-dom";
import routes from "@/routes";
import Header from "../../components/Header";
import Answer from "../../ui/Answer";
import { useRef, useState } from "react";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function AboutUsPage() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const dispatch = useDispatch();
  const { gender } = useSelector(selectors.selectQuestionnaire);
  const [selectedAnswer, setSelectedAnswer] = useState<IAnswer | null>(null);
  const clickAnswerTimeOutRef = useRef<NodeJS.Timeout>();
  const [searchParams] = useSearchParams()
  const aboutUsAnswersKey = searchParams.get('key') ?? "aboutUsAnswersA"

  const handleClick = async (answer: IAnswer) => {
    setSelectedAnswer(answer);
    await new Promise(
      (resolve) => (clickAnswerTimeOutRef.current = setTimeout(resolve, 400))
    );
    dispatch(
      actions.questionnaire.update({
        aboutUs: answer.id,
      })
    );
    setSelectedAnswer(null);
    navigate(routes.client.loadingProfileV1());
  };

  return (
    <div
      className={`${styles.page} page`}
      style={{
        backgroundColor: gender === "male" ? "#C1E5FF" : "#f7ebff",
      }}
    >
      <Header className={styles.header} />
      <Title className={styles.title} variant="h1">
        {translate("/about-us.title")}
      </Title>

      <div className={styles["answers-container"]}>
        {aboutUsAnswers[aboutUsAnswersKey].map((answer, index) => (
          <Answer
            classNameContainer={`${styles["answer-container"]} ${
              selectedAnswer?.id === answer.id ? styles["answer-active"] : ""
            }`}
            key={index}
            answer={answer}
            type="only-text-single"
            onClick={() => handleClick(answer)}
          />
        ))}
      </div>
    </div>
  );
}

export default AboutUsPage;
