import Button from "../button/button";
import useSteps, { DecisionsChoice } from "../../../hooks/palmistry/use-steps";
import { useSession } from "@/hooks/session/useSession";
import { IAnswersSessionPalmistry } from "@/api/resources/Session";
import { ESourceAuthorization } from "@/api/resources/User";
import { ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";

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

  const onNext = async (choice: DecisionsChoice) => {
    steps.saveCurrent(choice);
    await updateSession(
      {
        answers: {
          head_or_heart:
            choice.toLowerCase() as IAnswersSessionPalmistry["head_or_heart"],
        },
      },
      ESourceAuthorization["aura.palmistry"]
    );
    steps.goNext(choice);
  };

  return (
    <>
      <div className="palmistry-container__title-wrapper">
        <h3>{translate("/decisions.title")}</h3>
      </div>

      <div className="palmistry-container__button-wrapper">
        <Button
          type="button"
          active={steps.storedValue === DecisionsChoice.Heart}
          onClick={() => onNext(DecisionsChoice.Heart)}
        >
          {translate("/decisions.answer1")}
        </Button>

        <Button
          type="button"
          active={steps.storedValue === DecisionsChoice.Head}
          onClick={() => onNext(DecisionsChoice.Head)}
        >
          {translate("/decisions.answer2")}
        </Button>

        <Button
          type="button"
          active={steps.storedValue === DecisionsChoice.Both}
          onClick={() => onNext(DecisionsChoice.Both)}
        >
          {translate("/decisions.answer3")}
        </Button>
      </div>
    </>
  );
}
