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";

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

const OPTIONS: { id: string; title: string }[] = [
  { id: "nyt", title: "The New York Times" },
  { id: "forbes", title: "Forbes" },
  { id: "cosmopolitan", title: "Cosmopolitan" },
  { id: "oprah", title: "Oprah Daily" },
  { id: "social", title: "Social media" },
  { id: "other", title: "Other sources" },
];

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

  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}>
            Where did you first hear about us?
          </Title>
          <p className={styles.description}>
            Many people say they first learned about us through leading publications
            and platforms.
          </p>
          {OPTIONS.map((option) => (
            <Answer
              key={option.id}
              answer={option}
              isSelected={selected === option.id}
              onClick={() => handleSelect(option.id)}
            />
          ))}
        </div>
      </section>
    </main>
  );
}

export default ReviewV4;