import Button from "../button/button";
import ColorCircle from "../color-circle/color-circle";
import useSteps, {
  ColorYouLikeChoice,
} 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";

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

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

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

      <div className="palmistry-container__button-wrapper">
        <Button
          type="button"
          active={steps.storedValue === ColorYouLikeChoice.Red}
          onClick={() => onNext(ColorYouLikeChoice.Red)}
        >
          <ColorCircle color="rgb(255, 87, 88)" />

          <span>{translate("/color-you-like.answer5")}</span>
        </Button>

        <Button
          type="button"
          active={steps.storedValue === ColorYouLikeChoice.Yellow}
          onClick={() => onNext(ColorYouLikeChoice.Yellow)}
        >
          <ColorCircle color="rgb(255, 247, 61)" />

          <span>{translate("/color-you-like.answer6")}</span>
        </Button>

        <Button
          type="button"
          active={steps.storedValue === ColorYouLikeChoice.Blue}
          onClick={() => onNext(ColorYouLikeChoice.Blue)}
        >
          <ColorCircle color="rgb(6, 111, 222)" />

          <span>{translate("/color-you-like.answer1")}</span>
        </Button>

        <Button
          type="button"
          active={steps.storedValue === ColorYouLikeChoice.Orange}
          onClick={() => onNext(ColorYouLikeChoice.Orange)}
        >
          <ColorCircle color="rgb(255, 168, 0)" />

          <span>{translate("/color-you-like.answer3")}</span>
        </Button>

        <Button
          type="button"
          active={steps.storedValue === ColorYouLikeChoice.Green}
          onClick={() => onNext(ColorYouLikeChoice.Green)}
        >
          <ColorCircle color="rgb(117, 219, 156)" />

          <span>{translate("/color-you-like.answer2")}</span>
        </Button>

        <Button
          type="button"
          active={steps.storedValue === ColorYouLikeChoice.Violet}
          onClick={() => onNext(ColorYouLikeChoice.Violet)}
        >
          <ColorCircle color="rgb(151, 71, 255)" />

          <span>{translate("/color-you-like.answer4")}</span>
        </Button>
      </div>
    </>
  );
}
