import styles from "./styles.module.css";
import Title from "@/components/Title";
import { Gender, genders } from "@/data";
import { EProductKeys } from "@/data/products";
import routes from "@/routes";
import { actions } from "@/store";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import metricService from "@/services/metric/metricService";

interface IGenderPageProps {
  productKey?: EProductKeys;
}

function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { targetId } = useParams();

  useEffect(() => {
    const isShowTryApp = targetId === "i";
    dispatch(actions.userConfig.addIsShowTryApp(isShowTryApp));
    metricService.userParams({
      genderFrom: targetId,
    });
  }, [dispatch, targetId]);

  const selectGender = (gender: Gender) => {
    dispatch(actions.questionnaire.update({ gender: gender.id }));
    if (productKey === EProductKeys["moons.pdf.aura"]) {
      return navigate(routes.client.epeBirthdate());
    }
    if (productKey === EProductKeys["chat.aura"]) {
      return navigate(routes.client.advisorChatBirthdate());
    }
    navigate(`/questionnaire/profile/flowChoice`);
  };

  const getButtonBGColor = (gender: Gender): string => {
    const { colorAssociation } = gender;
    if (Array.isArray(colorAssociation)) {
      return `linear-gradient(125.02deg, ${colorAssociation.join(", ")})`;
    }
    if (typeof colorAssociation === "string") {
      return colorAssociation;
    }
    return "#f5f5f5";
  };

  return (
    <section className={`${styles.page} page`}>
      <Title variant="h2" className={styles.title}>
        Understand Yourself and Improve Relationships With Astrology
      </Title>
      <span className={styles.description}>1-Minute Personal Assessment</span>
      <Title variant="h3" className={styles["title-select"]}>
        Select your gender:
      </Title>
      <div className={styles["genders-container"]}>
        {genders.map((gender, index) => (
          <div
            className={styles["gender"]}
            key={index}
            onClick={() => {
              selectGender(gender);
            }}
          >
            <img
              src={gender.img}
              className={styles["gender__img"]}
              alt={gender.id}
            />
            <button
              className={styles["gender__button"]}
              style={{ background: getButtonBGColor(gender) }}
            >
              <span>{gender.name}</span>
              <div className={styles["button__arrow"]}></div>
            </button>
          </div>
        ))}
      </div>
    </section>
  );
}

export default GenderPage;
