import routes from "@/routes";
import styles from "./styles.module.scss";
import Title from "@/components/Title";
import Button from "../../components/Button";
import { useNavigate } from "react-router-dom";
import BiometricData from "@/components/palmistry/biometric-data/biometric-data";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import UsersHands from "@/components/UsersHands";
import { useHandsGeneration } from "@/hooks/handsGeneration/useHandsGeneration";
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
import Loader, { LoaderColor } from "@/components/Loader";

function LetScan() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const navigate = useNavigate();
  const { animationData } = useLottie({
    loadKey: ELottieKeys.letScan,
  });

  const {
    displayHands
  } = useHandsGeneration();

  const { isReady, variant: dynamicHandsPalmistryV1 } = useUnleash({
    flag: EUnleashFlags.dynamicHandsPalmistryV1
  });

  const handleNext = () => {
    navigate(routes.client.palmistryV1ScanInstruction());
  };

  if (!isReady) return <Loader color={LoaderColor.Black} />;

  return (
    <div className={styles.page}>
      <div className={styles["lottie-animation-container"]}>
        {animationData &&
          <DotLottieReact
            className={`${styles["lottie-animation"]} ym-hide-content`}
            data={animationData}
            autoplay
            loop={true}
            width={323}
          />}
      </div>
      <Title variant="h2" className={styles.title}>
        {translate("/let-scan.title")}
      </Title>
      <p className={styles.text}>{translate("/let-scan.text")}</p>
      {dynamicHandsPalmistryV1 === "show" && (
        <UsersHands
          title={translate("/let-scan.hands.title", {
            count: String(displayHands.length),
          })}
          hands={displayHands}
        />
      )}
      <Button className={styles.button} onClick={handleNext}>
        {translate("next")}
      </Button>
      <BiometricData className={styles.biometric} />
    </div>
  );
}

export default LetScan;
