import { useState } from "react";
import { genders } from "../../data/genders";
import styles from "./styles.module.scss";
import { Gender } from "@/data";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useSelector } from "react-redux";
import { selectors } from "@/store";

interface IChooseGenderProps {
  onSelectGender: (gender: Gender | null) => void;
}

function ChooseGender({ onSelectGender }: IChooseGenderProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const { gender } = useSelector(selectors.selectQuestionnaire);
  const [selectedGender, setSelectedGender] = useState<Gender | null>(
    genders.find((g) => g.id === gender) || null
  );

  const selectGender = async (gender: Gender) => {
    if (selectedGender?.id === gender.id) {
      setSelectedGender(null);
      onSelectGender(null);
    } else {
      setSelectedGender(gender);
      onSelectGender(gender);
    }
  };

  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 (
    <div className={styles["genders-container"]}>
      {genders.map((gender, index) => (
        <div
          className={`${styles["gender"]} ${
            selectedGender?.id === gender.id && styles["gender--selected"]
          }`}
          key={index}
          onClick={() => {
            selectGender(gender);
          }}
        >
          <span className={styles["gender__name"]}>{translate(gender.id)}</span>
          <button
            className={styles["image-container"]}
            style={{
              background: getButtonBGColor(gender),
            }}
          >
            <img
              src={gender.img}
              className={styles["gender__img"]}
              alt={gender.id}
            />
            <div className={styles["gender__slide-container"]}>
              <svg
                width="27"
                height="27"
                viewBox="0 0 27 27"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className={styles["gender__slide-element"]}
              >
                <path
                  d="M13.5 0C17.0804 0 20.5142 1.42232 23.0459 3.95406C25.5777 6.4858 27 9.91958 27 13.5C27 15.2728 26.6508 17.0283 25.9724 18.6662C25.2939 20.3041 24.2995 21.7924 23.0459 23.0459C20.5142 25.5777 17.0804 27 13.5 27C9.91958 27 6.4858 25.5777 3.95406 23.0459C1.42232 20.5142 0 17.0804 0 13.5C0 11.7272 0.349188 9.97167 1.02763 8.33377C1.70606 6.69588 2.70047 5.20765 3.95406 3.95406C5.20765 2.70047 6.69588 1.70606 8.33377 1.02762C9.97167 0.349186 11.7272 0 13.5 0ZM10.8 21.6L18.9 13.5L10.8 5.4L8.91 7.29L15.12 13.5L8.91 19.71L10.8 21.6Z"
                  fill={gender.id === "male" ? "#85B6FF" : "#E4C6FF"}
                />
              </svg>
            </div>
          </button>
        </div>
      ))}
    </div>
  );
}

export default ChooseGender;
