import Title from "@/components/Title";
import styles from "./styles.module.scss";
import routes from "@/routes";
import Button from "../../components/Button";
import BiometricData from "@/components/palmistry/biometric-data/biometric-data";
import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import ScanInstructionSVG from "../../images/SVG/ScanInstruction";
import { usePreloadImages } from "@/hooks/preload/images";
import { useUploadImage } from "@/hooks/palmistry/useUploadImage";
import Loader, { LoaderColor } from "@/components/Loader";
import { images } from "../../data";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import {EUnleashFlags, useUnleash} from "@/hooks/ab/unleash/useUnleash.ts";

function ScanInstruction() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const navigate = useNavigate();

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

  const gender = useSelector(selectors.selectQuestionnaire)?.gender || "female";

  usePreloadImages([
    images("scan-hand/Palm-tach-A.gif"),
    images(`scan-hand/${gender}-Palm-A.png`)
  ]);

  const handleToScannedPhoto = () => {
    navigate(routes.client.compatibilityV2ScannedPhoto());
  };

  const { isLoading, isError, onSelectFile } = useUploadImage({
    fingersNames: {
      thumb: translate("thumb"),
      index_finger: translate("index_finger"),
      middle_finger: translate("middle_finger"),
      ring_finger: translate("ring_finger"),
      pinky: translate("pinky"),
    },
    keyOfStore: "compatibilityV2",
    onImageUploaded: handleToScannedPhoto
  });

  const handleClick = () => {
    navigate(routes.client.compatibilityV2Camera());
  };

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

  const imageVariant = v2CompatibilityScanInstructionImage === 'v1' ? 'v1' : 'v0';

  return (
    <div className={styles.page}>
      <Title variant="h2" className={styles.title}>
        {translate("/scan-instruction.title")}
      </Title>
      <ScanInstructionSVG
          variant={imageVariant}
      />
      <Button className={styles.button} onClick={handleClick}>
        {translate("/scan-instruction.button")}
      </Button>
      <input
        id="upload-input"
        type="file"
        accept="image/*"
        style={{ display: 'none' }}
        onChange={onSelectFile}
      />
      <label htmlFor="upload-input" className={styles.labelUpload}>
        {translate("/scan-instruction.upload_photo")}
        {isLoading && <div className={styles.loaderContainer}>
          <Loader color={LoaderColor.Black} />
        </div>}
      </label>
      {isError &&
        <p className={styles.error}>{translate("/scan-instruction.error")}</p>
      }
      <BiometricData className={styles.biometric} />
    </div>
  );
}

export default ScanInstruction;