import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { textVariables } from "@/data";
import StaryKey from "./starry_key.svg";

function QuestionnaireIntermediatePage() {
  const navigate = useNavigate();
  const { problems } = useSelector(selectors.selectQuestionnaire);
  const path = window.location.href.split("/").filter(Boolean).pop();
  const backgroundImages =
    textVariables[path as keyof typeof textVariables]?.backgroundImages;
  const backgroundImage =
    backgroundImages && backgroundImages[problems]
      ? backgroundImages[problems]
      : "/couple_holding_hands_1.webp";

  const handleBack = () => {
    navigate(-1);
  };

  const handleNext = () => {
    if (path === "works-traits") {
      return navigate(
        `${routes.client.questionnaire()}/personalityTraits/relateToStatement`
      );
    }
    navigate(`${routes.client.questionnaire()}/partnerProfile/partnerGender`);
  };

  return (
    <section
      className={`${styles.page} page`}
      style={{
        backgroundImage: `url(${backgroundImage})`,
      }}
    >
      <object
        type="image/svg+xml"
        data={StaryKey}
        style={{ minHeight: "138px" }}
      >
        svg-animation
      </object>
      <div>
        {path && (
          <Title variant="h1" className={styles.title}>
            {textVariables[path as keyof typeof textVariables].titles[
              problems
            ] || ""}
          </Title>
        )}
        {textVariables[path as keyof typeof textVariables].description}
      </div>
      <div className={styles["buttons-container"]}>
        <MainButton
          className={`${styles.button} ${styles["back-button"]}`}
          onClick={handleBack}
        >
          Back
        </MainButton>
        <MainButton
          className={`${styles.button} ${styles["next-button"]}`}
          onClick={handleNext}
        >
          Next
        </MainButton>
      </div>
    </section>
  );
}

export default QuestionnaireIntermediatePage;
