import Button from "../button/button";
import useSteps, { GenderChoice } from "../../../hooks/palmistry/use-steps";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { useSession } from "@/hooks/session/useSession";
import { EGender, ESourceAuthorization } from "@/api/resources/User";
import { ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";

export default function StepGender() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV0);
  const steps = useSteps();
  const dispatch = useDispatch();
  const { updateSession } = useSession();

  const onNext = async (choice: GenderChoice) => {
    dispatch(actions.questionnaire.update({ gender: choice }));
    await updateSession(
      { profile: { gender: EGender[choice] } },
      ESourceAuthorization["aura.palmistry"]
    );
    steps.saveCurrent(choice);
    steps.goNext(choice);
  };

  return (
    <>
      <h3 className="palmistry-container__header">
        {translate("/gender.title")}
      </h3>

      <p className="palmistry-container__description">
        {translate("/gender.description")}
      </p>

      <div className="palmistry-container__button-wrapper">
        <Button
          type="button"
          active={steps.storedValue === GenderChoice.Male}
          onClick={() => onNext(GenderChoice.Male)}
        >
          {translate("male")}
        </Button>

        <Button
          type="button"
          active={steps.storedValue === GenderChoice.Female}
          onClick={() => onNext(GenderChoice.Female)}
        >
          {translate("female")}
        </Button>
      </div>
    </>
  );
}
