import { useState } from "react";
import { useSelector } from "react-redux";
import Header from "@/components/CompatibilityV2/components/Header";
import StepperBar from "@/components/CompatibilityV2/components/StepperBar";
import Title from "@/components/Title";
import Answer from "@/components/CompatibilityV2/components/Answer";
import styles from "./styles.module.scss";
import layoutCss from "@/routerComponents/Compatibility/v2/Layout/styles.module.css";
import stepperCss from "@/routerComponents/Compatibility/v2/StepperLayout/styles.module.scss";
import { selectors } from "@/store";
import { answerTimeOut } from "@/components/CompatibilityV2/data";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface IReviewV4Props {
  handleNext: () => void;
}

function ReviewV4({ handleNext }: IReviewV4Props) {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const darkTheme = useSelector(selectors.selectDarkTheme);
  const [selected, setSelected] = useState<string | null>(null);

  const OPTIONS: { id: string; title: string }[] = [
    { id: "nyt", title: translate("/review.v4.answers.nyt") },
    { id: "forbes", title: translate("/review.v4.answers.forbes") },
    { id: "cosmopolitan", title: translate("/review.v4.answers.cosmopolitan") },
    { id: "oprah", title: translate("/review.v4.answers.oprah") },
    { id: "social", title: translate("/review.v4.answers.social") },
    { id: "other", title: translate("/review.v4.answers.other") },
  ];

  const handleSelect = (id: string) => {
    setSelected(id);
    setTimeout(() => {
      handleNext();
    }, answerTimeOut);
  };

  return (
    <main className={`${layoutCss.main} content`}>
      <Header
        className={layoutCss.header}
        classNameTitle={layoutCss["header-title"]}
      />
      <StepperBar
        className={stepperCss["stepper-bar"]}
        length={10}
        currentStep={0.5}
        color={darkTheme ? "#B2BCFF" : "#353E75"}
      />
      <section className={layoutCss.page}>
        <div className={styles.container}>
          <Title variant="h2" className={styles.title}>
            {translate("/review.v4.title")}
          </Title>
          <p className={styles.description}>
            {translate("/review.v4.description")}
          </p>
          {OPTIONS.map((option) => (
            <Answer
              key={option.id}
              answer={option}
              isSelected={selected === option.id}
              onClick={() => handleSelect(option.id)}
            />
          ))}
        </div>
      </section>
    </main>
  );
}

export default ReviewV4;
