import { useCallback, useEffect, useRef, useState } from "react";
import styles from "./styles.module.scss";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { IPalmistryLine, IPalmistryPoint } from "@/api/resources/Palmistry";
import { IPalmistryFingerLocal } from "@/store/palmistry";

interface IPhotoReadyProps {
  className?: string;
  lines: IPalmistryLine[];
  fingers: IPalmistryFingerLocal[];
}

function PhotoReady({ className = "", lines, fingers }: IPhotoReadyProps) {
  const photo = useSelector(selectors.selectPalmistryPhoto);

  const imageRef = useRef<HTMLImageElement>(null);
  const [isImageLoaded, setIsImageLoaded] = useState(false);
  const [imageWidth, setImageWidth] = useState(0);
  const [imageHeight, setImageHeight] = useState(0);
  const linesRef = useRef<SVGPathElement[]>([]);

  useEffect(() => {
    if (isImageLoaded && imageRef.current) {
      setImageWidth(imageRef.current.width || 0);
      setImageHeight(imageRef.current.height || 0);
    }
  }, [isImageLoaded]);

  const getCoordinatesString = useCallback(
    (points: IPalmistryPoint[]) => {
      const coordinatesString = `M ${points[0]?.x * imageWidth} ${
        points[0]?.y * imageHeight
      }`;
      return points.reduce(
        (acc, point) =>
          `${acc} L ${point?.x * imageWidth} ${point?.y * imageHeight}`,
        coordinatesString
      );
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [lines, isImageLoaded, imageWidth, imageHeight]
  );

  return (
    <div className={`${styles.container} ${className}`}>
      <img
        className="scanned-photo__image"
        alt="PalmIcon"
        src={photo}
        ref={imageRef}
        onLoad={() => setIsImageLoaded(true)}
      />
      {!!imageHeight && !!imageWidth && (
        <svg
          viewBox={`0 0 ${imageWidth} ${imageHeight}`}
          className={styles["svg-objects"]}
        >
          {!!fingers.length &&
            fingers?.map((finger, index) => {
              return (
                <svg
                  x={finger.point.x * imageWidth - 12}
                  y={finger.point.y * imageHeight - 12}
                  height="24px"
                  width="24px"
                  key={index}
                >
                  {/* <circle
                    cx="50%"
                    cy="50%"
                    r="11"
                    fill="white"
                    opacity="0.3"
                    className="scanned-photo__finger-point"
                  /> */}
                  <circle
                    cx="50%"
                    cy="50%"
                    r="4"
                    fill="#066FDE"
                    stroke="white"
                    strokeWidth="0.3"
                  />
                </svg>
              );
            })}

          <>
            {lines.map((line, index) => (
              <path
                key={index}
                className={`${styles.line} ${styles[`line-${line?.name}`]}`}
                d={getCoordinatesString(line?.points)}
                ref={(el) => (linesRef.current[index] = el as SVGPathElement)}
              />
            ))}
          </>
        </svg>
      )}
    </div>
  );
}

export default PhotoReady;
