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

function GenderPage(): JSX.Element {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { targetId } = useParams();
  const pathName = window.location.pathname;

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

  const selectGender = (gender: Gender) => {
    dispatch(actions.questionnaire.update({ gender: gender.id }));
    if (pathName === "/epe/gender") {
      return navigate(routes.client.epeBirthdate());
    }
    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;