import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

type Props = {
    radius: number
    duration: number
    direction: "clockwise" | "counterclockwise"
    imageCount: number
    imageSize: number
    speedUpOnHover: boolean
    // Groupe d'images sous forme de tableau de chaînes (URL)
    images: string[]
}

export function CirclingPictures(props: Props) {
    const {
        radius,
        duration,
        direction,
        imageCount,
        imageSize,
        speedUpOnHover,
        images,
    } = props

    // Calcul du container pour un "fit content" parfait : diamètre du cercle + taille d'une image.
    const containerSize = 2 * radius + imageSize

    // Référence pour le container qui contient les images.
    const containerRef = React.useRef<HTMLDivElement>(null)
    // Stockage de l’offset de rotation (mis à jour en interne sans provoquer de re-render).
    const offsetRef = React.useRef(0)
    // Référence pour le temps de la dernière frame.
    const lastTimeRef = React.useRef<number | null>(null)
    // Multiplicateur dynamique (calculé selon la position du curseur).
    const dynamicMultiplierRef = React.useRef(1)
    // Indique si la souris est sur le composant.
    const isHoveredRef = React.useRef(false)

    // Gestion des événements de la souris pour ajuster le multiplicateur dynamique.
    const handleMouseMove = (
        e: React.MouseEvent<HTMLDivElement, MouseEvent>
    ) => {
        if (!speedUpOnHover) return
        const rect = e.currentTarget.getBoundingClientRect()
        const center = rect.width / 2
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        const dx = x - center
        const dy = y - center
        const distance = Math.sqrt(dx * dx + dy * dy)
        const normalized = Math.min(distance / center, 1)
        // Le multiplicateur dynamique varie de 3 (au centre) à 1 (au bord)
        dynamicMultiplierRef.current = 1 + (1 - normalized) * 2
    }

    const handleMouseEnter = () => {
        if (!speedUpOnHover) return
        isHoveredRef.current = true
    }

    const handleMouseLeave = () => {
        if (!speedUpOnHover) return
        dynamicMultiplierRef.current = 1
        isHoveredRef.current = false
    }

    // Boucle d'animation qui met à jour l'offset et les positions des images de façon impérative.
    React.useEffect(() => {
        let animationFrameId: number

        const update = (time: number) => {
            if (lastTimeRef.current !== null) {
                const deltaTime = (time - lastTimeRef.current) / 1000 // en secondes
                const effectiveMultiplier =
                    speedUpOnHover && isHoveredRef.current
                        ? dynamicMultiplierRef.current * 0.75
                        : 1
                // Calcul pour une rotation complète (2π) en "duration" secondes.
                const increment =
                    (2 * Math.PI * deltaTime * effectiveMultiplier) / duration
                const directionFactor = direction === "clockwise" ? 1 : -1
                offsetRef.current += directionFactor * increment

                // Mise à jour impérative des positions des enfants.
                if (containerRef.current) {
                    const children = containerRef.current.children
                    const count = children.length
                    const angleStep = count > 0 ? (2 * Math.PI) / count : 0
                    for (let i = 0; i < count; i++) {
                        const angle = i * angleStep + offsetRef.current
                        const x = radius * Math.cos(angle)
                        const y = radius * Math.sin(angle)
                        const child = children[i] as HTMLElement
                        child.style.left = `calc(50% + ${x}px)`
                        child.style.top = `calc(50% + ${y}px)`
                    }
                }
            }
            lastTimeRef.current = time
            animationFrameId = requestAnimationFrame(update)
        }
        animationFrameId = requestAnimationFrame(update)
        return () => cancelAnimationFrame(animationFrameId)
    }, [duration, direction, radius, speedUpOnHover])

    return (
        <Frame
            width={containerSize}
            height={containerSize}
            background="none"
            style={{ position: "relative", overflow: "visible" }}
            onMouseMove={handleMouseMove}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <div
                ref={containerRef}
                style={{ position: "absolute", width: "100%", height: "100%" }}
            >
                {images.slice(0, imageCount).map((img, index) => (
                    <div
                        key={index}
                        style={{
                            position: "absolute",
                            transform: "translate(-50%, -50%)",
                            width: imageSize,
                            height: imageSize,
                        }}
                    >
                        <img
                            src={img}
                            alt={`Image ${index + 1}`}
                            style={{
                                width: "100%",
                                height: "100%",
                                objectFit: "cover",
                            }}
                        />
                    </div>
                ))}
            </div>
        </Frame>
    )
}

CirclingPictures.defaultProps = {
    radius: 120,
    duration: 10,
    direction: "clockwise",
    imageCount: 7,
    imageSize: 80,
    speedUpOnHover: true,
    images: [
        "https://via.placeholder.com/150/FF0000/FFFFFF?text=Image1",
        "https://via.placeholder.com/150/00FF00/FFFFFF?text=Image2",
        "https://via.placeholder.com/150/0000FF/FFFFFF?text=Image3",
        "https://via.placeholder.com/150/FFFF00/FFFFFF?text=Image4",
        "https://via.placeholder.com/150/FF00FF/FFFFFF?text=Image5",
    ],
}

addPropertyControls(CirclingPictures, {
    radius: {
        type: ControlType.Number,
        title: "Radius",
        min: 0,
        max: 300,
        step: 1,
    },
    duration: {
        type: ControlType.Number,
        title: "Duration (sec)",
        min: 1,
        max: 60,
        step: 1,
    },
    direction: {
        type: ControlType.Enum,
        title: "Direction",
        options: ["clockwise", "counterclockwise"],
    },
    imageCount: {
        type: ControlType.Number,
        title: "Image Count",
        min: 1,
        max: 10,
        step: 1,
    },
    imageSize: {
        type: ControlType.Number,
        title: "Image Size",
        min: 10,
        max: 200,
        step: 1,
    },
    speedUpOnHover: {
        type: ControlType.Boolean,
        title: "Speed up on hover",
    },
    images: {
        type: ControlType.Array,
        title: "Images",
        control: {
            type: ControlType.Image,
        },
        maxCount: 10,
    },
})