import routes, { compatibilityV3Prefix } from "@/routes";
import styles from "./styles.module.scss";
import Title from "@/components/Title";
import Button from "../../components/Button";
import { Navigate, 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 { usePreloadImages } from "@/hooks/preload/images";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { useMetricABFlags } from "@/services/metric/metricService";

function FindHappiness() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const location = useLocation();
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
  usePreloadImages(["/male-gender.webp", "/female-gender.webp"]);
  const { flags, ready } = useMetricABFlags();
  const imageType = flags?.welcomePageImage?.[0];
  const image = imageType === "v1" ? "/hand-with-lines-v1.png" : "/hand-with-lines.png";

  useEffect(() => {
    const feature = location.pathname.replace(
      routes.client.compatibilityV3Welcome(),
      ""
    );
    if (!!feature?.length) {
      dispatch(actions.userConfig.setFeature(feature));
    }
  }, [dispatch, location.pathname]);

  return <Navigate to={routes.client.compatibilityV3Gender()} />

  if (!ready) return null;

  return (
    <>
      {/* <div className={styles["blocks-container"]}>
        <div className={styles.block}>
          <img src={`${compatibilityV3Prefix}/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> */}
      <DotLottieReact
        className={`${styles["lottie-animation"]} ym-hide-content`}
        // data={animationData}
        autoplay
        loop={false}
        width={1920}
      />
      <img
        className={styles.image}
        src={`${compatibilityV3Prefix}${image}`}
        alt="Hand with lines"
        style={{
          minHeight: imageType === "v1" ? "auto" : "341px",
          maxWidth: imageType === "v1" ? "330px" : "250px"
        }}
      />
      <Title variant="h2" className={styles.title}>
        {translate("/find-your-happiness.title")}
      </Title>
      <div className={styles.advantages}>
        <ul className={styles.list}>
          <li>
            {translate("/find-your-happiness.advantage1")}
          </li>
          <li>
            {translate("/find-your-happiness.advantage2")}
          </li>
          <li>
            {translate("/find-your-happiness.advantage3")}
          </li>
        </ul>
      </div>
      <div className={styles["button-container"]}>
        <Button onClick={() => navigate(`${compatibilityV3Prefix}/gender`)}>
          {translate("next")}
        </Button>
      </div>
      <p className={styles.description}>
        {translate("/find-your-happiness.text")}
      </p>
    </>
  );
}

export default FindHappiness;
