import Title from "@/components/Title";
import styles from "./styles.module.css";
import { EProductKeys } from "@/data/products";
import routes from "@/routes";
import { actions } from "@/store";
import { Avatar } from "@mui/material";
import { FC, useEffect } from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { Gender, genders } from "../../data/data";
import { useStyle } from "@/routerComponents/Mike/v1/providers/StyleProvider/useStyle";

interface IGenderPageProps {
  productKey?: EProductKeys;
}

const GenderPage: FC<IGenderPageProps> = ({ productKey }) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { setStyle } = useStyle();

  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(`${routes.client.mikeV1()}/questionnaire/profile/flowChoice`);
  };

  useEffect(() => {
    setStyle({ background: "#f7f7f7" });
  }, [setStyle]);
  return (
    <div className="page-mike">
      <div className={styles["inner-container"]}>
        <Avatar
          className={styles.avatar}
          alt="avatar"
          src="/mike/avatar.webp"
          sx={{ width: 63, height: 63 }}
        />
        <Title variant="h3" className={styles.title}>
          Understand Yourself and Improve Relationships With Astrology
        </Title>
      </div>
      <Title variant="h4" className={styles.subtitle}>
        1-Minute Personal Assessment
      </Title>
      <div className={styles["genders-wrapper"]}>
        <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);
              }}
            >
              <div className={styles["gender-img-container"]}>
                <img
                  src={gender.img}
                  className={styles["gender__img"]}
                  alt={gender.id}
                />
              </div>
              <button
                className={styles["gender__button"]}
                style={{ background: gender.colorAssociation }}
              >
                <span>{gender.name}</span>
              </button>
            </div>
          ))}
        </div>
      </div>
      <div className={styles["container-policy"]}>
        <p className={styles.text}>
          By continuing, you agree to our{" "}
          <a href="#" className={styles.underlined}>
            EULA
          </a>{" "}
          and{" "}
          <a href="#" className={styles.underlined}>
            Privacy Notice
          </a>
          . Have a question? Reach our support team{" "}
          <a href="#" className={styles.underlined}>
            here
          </a>
        </p>
      </div>
    </div>
  );
};

export default GenderPage;
