import { IPalmistryPoint } from "@/api/resources/Palmistry";
import Title from "../Title";
import styles from "./styles.module.scss";
import { DisplayHand } from "@/hooks/handsGeneration/useHandsGeneration";
import { useRef } from "react";

interface IUsersHandsProps {
    title?: string;
    hands: DisplayHand[];
}

function UsersHands({
    title,
    hands
}: IUsersHandsProps) {
    const linesRef = useRef<SVGPathElement[]>([]);

    const getCoordinatesString = (points: IPalmistryPoint[]) => {
        const coordinatesString = `M ${points[0]?.x * 56} ${points[0]?.y * 75
            }`;
        return points.reduce(
            (acc, point) =>
                `${acc} L ${point?.x * 56} ${point?.y * 75}`,
            coordinatesString
        );
    }

    const getLineLength = (line: SVGPathElement) => {
        return line?.getTotalLength();
    };

    return (
        <div className={styles.container}>
            {!!title?.length && <Title variant="h3" className={styles.title}>
                {title}
            </Title>}
            <div className={styles.hands}>
                {hands.map(({ image, lines, willBeRemoved }, index) => (
                    <div className={`${styles.hand} ${willBeRemoved ? styles.willBeRemoved : ""}`} key={index}>
                        <img
                            src={image}
                            alt={`hand-${index}`}
                        />
                        <svg
                            viewBox={`0 0 ${56} ${75}`}
                            className={`scanned-photo__svg-objects ${styles.svgObjects}`}
                        >
                            {/* {!!fingers.length &&
                                fingers?.map((finger, index) => {
                                    return (
                                        <svg
                                            x={finger.point.x * 56 - 12}
                                            y={finger.point.y * 75 - 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="5"
                                                fill="#066FDE"
                                                stroke="white"
                                                strokeWidth="0.3"
                                                className="scanned-photo__finger-point"
                                            />
                                        </svg>
                                    );
                                })} */}

                            {lines.map((line, index) => (
                                <g key={`line-${index}`}>
                                    <path
                                        className={`scanned-photo__line scanned-photo__line_${line?.name} ${styles.line}`}
                                        d={getCoordinatesString(line?.points)}
                                        ref={(el) =>
                                            (linesRef.current[index] = el as SVGPathElement)
                                        }
                                        style={{
                                            strokeDasharray:
                                                getLineLength(linesRef.current[index]) || 500,
                                            strokeDashoffset:
                                                getLineLength(linesRef.current[index]) || 500,
                                        }}
                                    />
                                </g>
                            ))}
                        </svg>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default UsersHands