import LightButton from "@/components/ui/buttons/LightButton";
import IconClick from "@/components/ui/buttons/IconClick";
import IMAGES from "@/config/images";
import { Letter, SupportedAlphabets } from "@/lib/interfaces";
import {
  Dispatch,
  KeyboardEvent,
  SetStateAction,
  useCallback,
  useEffect,
  useState,
} from "react";
import { useTranslations } from "next-intl";

export default function MemoryCard({
  alphabet,
  setChosenAlphabet,
}: {
  alphabet: Letter[];
  setChosenAlphabet: Dispatch<SetStateAction<SupportedAlphabets | null>>;
}) {
  const t = useTranslations("alphabet");
  const [index, setIndex] = useState(() => alphabet.length > 0 ? Math.floor(Math.random() * alphabet.length) : 0);
  const [more, setMore] = useState(false);
  const [ipaDisplay, setIPADisplay] = useState(true);
  const [letterDisplay, setLetterDisplay] = useState(true);

  const refresh = useCallback(() => {
    if (alphabet.length > 0) {
      setIndex(Math.floor(Math.random() * alphabet.length));
    }
  }, [alphabet.length]);

  useEffect(() => {
    const handleKeydown = (e: globalThis.KeyboardEvent) => {
      if (e.key === " ") refresh();
    };
    document.addEventListener("keydown", handleKeydown);
    return () => document.removeEventListener("keydown", handleKeydown);
  }, [refresh]);

  const letter = alphabet[index] || { letter: "", letter_name_ipa: "", letter_sound_ipa: "" };
  return (
    <div
      className="w-full flex justify-center items-center"
      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => e.preventDefault()}
    >
      <div className="m-4 p-4 w-full md:w-[60dvw] flex-col rounded-2xl shadow border-gray-200 border flex justify-center items-center">
        <div className="w-full flex justify-end items-center">
          <IconClick
            size={32}
            alt="close"
            src={IMAGES.close}
            onClick={() => setChosenAlphabet(null)}
          ></IconClick>
        </div>
        <div className="flex flex-col gap-12 justify-center items-center">
          <span className="text-7xl md:text-9xl">
            {letterDisplay ? letter.letter : ""}
          </span>
          <span className="text-5xl md:text-7xl text-gray-400">
            {ipaDisplay ? letter.letter_sound_ipa : ""}
          </span>
        </div>
        <div className="flex flex-row mt-32 items-center justify-center gap-2">
          <IconClick
            size={48}
            alt="refresh"
            src={IMAGES.refresh}
            onClick={refresh}
          ></IconClick>
          <IconClick
            size={48}
            alt="more"
            src={IMAGES.more_horiz}
            onClick={() => setMore(!more)}
          ></IconClick>
          {more ? (
            <>
              <LightButton
                className="w-20"
                onClick={() => {
                  setLetterDisplay(!letterDisplay);
                }}
              >
                {letterDisplay ? t("hideLetter") : t("showLetter")}
              </LightButton>
              <LightButton
                className="w-20"
                onClick={() => {
                  setIPADisplay(!ipaDisplay);
                }}
              >
                {ipaDisplay ? t("hideIPA") : t("showIPA")}
              </LightButton>
            </>
          ) : (
            <></>
          )}
        </div>
      </div>
    </div>
  );
}