import { useNavigate } from "react-router-dom";
import styles from "./styles.module.css";
import routes from "@/routes";
import { useTranslations } from "@/hooks/translations";
import Title from "@/components/Title";
import MainButton from "@/components/MainButton";
import { useMemo, useState } from "react";
import { getRandomArbitrary } from "@/services/random-value";
import { UseInterval } from "@/hooks/useInterval";

const answers = [
  "Undoubtedly.",
  "Predetermined.",
  "No doubt about it.",
  "Definitely yes.",
  "You can be sure of it.",
  "It seems like yes.",
  "Most likely.",
  "Looks promising.",
  "Signs point to yes.",
  "Yes.",
  "Unclear now, try again.",
  "Ask later.",
  "Better not tell you now.",
  "Cannot predict now.",
  "Concentrate and ask again.",
  "Don’t even think about it.",
  "My answer is no.",
  "According to my sources, no.",
  "Prospects aren't very good.",
  "Quite doubtful.",
];

function MagicBallPage(): JSX.Element {
  const { translate } = useTranslations();
  const navigate = useNavigate();
  const [processState, setProcessState] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [isRepeat, setIsRepeat] = useState(false);
  const auraText = useMemo(
    () => [
      "Start",
      "3",
      "2",
      "1",
      answers[getRandomArbitrary(0, answers.length - 1)],
    ],
    [isRepeat]
  );

  const clickCross = () => {
    navigate(routes.client.home());
  };

  const start = () => {
    if (processState) return;
    setIsRunning(true);
  };

  UseInterval(
    () => {
      if (processState >= auraText.length - 1) {
        setIsRunning(false);
        return;
      }
      setProcessState((prev) => prev + 1);
    },
    isRunning ? 1000 : null
  );

  const repeat = () => {
    setProcessState(0);
    setIsRunning(false);
    setIsRepeat((prev) => !prev);
  };

  return (
    <section className={`${styles.page} page`}>
      <div className={styles.header}>
        <img
          className={`${styles.cross}`}
          src="/cross.webp"
          alt="Cross"
          onClick={clickCross}
        />
      </div>
      <div className={styles.content}>
        <Title variant="h3" className={styles.title}>
          {translate("au.magic.title")}
        </Title>
        <p className={styles.text}>{translate("au.magic.text1")}</p>
        <div className={styles.aura} onClick={start}>
          <Title variant="h2" className={styles["aura__text"]}>
            {auraText[processState]}
          </Title>
        </div>
        {processState === auraText.length - 1 && (
          <MainButton className={styles.repeat} onClick={repeat}>
            {"Repeat"}
          </MainButton>
        )}
      </div>
    </section>
  );
}

export default MagicBallPage;
