import routes, { palmistryV1Prefix } from "@/routes";
import styles from "./styles.module.scss";
import Title from "@/components/Title";
import { useLocation, useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useDispatch } from "react-redux";
import { useEffect } from "react";
import { actions } from "@/store";
// import StarSVG from "../../images/SVG/Star";
import StarSVG from "@/components/PalmistryV1/images/SVG/Star";
import Header from "../../components/Header";
import QuestionnaireGreenButton from "../../ui/GreenButton";

function FindHappiness() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const location = useLocation();
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);

  useEffect(() => {
    const feature = location.pathname.replace(
      routes.client.palmistryV1Welcome(),
      ""
    );
    dispatch(
      actions.userConfig.setFeature(
        feature.includes("/v1/gender") ? "" : feature
      )
    );
  }, [dispatch, location.pathname]);

  return (
    <section className={`${styles.page} page`}>
      <Header className={styles.header} />
      <div className={styles["blocks-container"]}>
        <div className={styles.block}>
          <img src={`${palmistryV1Prefix}/darts.png`} alt="darts" />
          <ol>
            <li>{translate("/find-your-happiness.point1")}</li>
            <li>
              <b>{translate("/find-your-happiness.point2")}</b>
            </li>
          </ol>
        </div>
        <div className={styles.block}>
          <StarSVG />
          <ol>
            <li>{translate("/find-your-happiness.point3")}</li>
            <li>{translate("/find-your-happiness.point4")}</li>
          </ol>
        </div>
      </div>
      <img
        className={styles.image}
        src={`${palmistryV1Prefix}/hand-with-lines.png`}
        alt="Hand with lines"
      />
      <Title variant="h2" className={styles.title}>
        {translate("/find-your-happiness.title")}
      </Title>
      <div className={styles["button-container"]}>
        <QuestionnaireGreenButton
          onClick={() => navigate(routes.client.scanInstructionV1())}
        >
          {translate("next")}
        </QuestionnaireGreenButton>
      </div>
      <p className={styles.description}>
        {translate("/find-your-happiness.text")}
      </p>
    </section>
  );
}

export default FindHappiness;
