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

const choiceForSession: {
  [key in WishChoice]: IAnswersSessionPalmistry["what_aspects"];
} = {
  [WishChoice.Love]: "love_relationships",
  [WishChoice.Health]: "health_vitality",
  [WishChoice.Career]: "career_destiny",
};

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

  const onNext = async (choice: WishChoice) => {
    await updateSession(
      {
        answers: {
          what_aspects: choiceForSession[choice],
        },
      },
      ESourceAuthorization["aura.palmistry"]
    );
    steps.saveCurrent(choice);
    steps.goNext(choice);
  };

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

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

        <Button
          type="button"
          active={steps.storedValue === WishChoice.Health}
          onClick={() => onNext(WishChoice.Health)}
        >
          {translate("/wish.answer2")}
        </Button>

        <Button
          type="button"
          active={steps.storedValue === WishChoice.Career}
          onClick={() => onNext(WishChoice.Career)}
        >
          {translate("/wish.answer3")}
        </Button>
      </div>
    </>
  );
}
