import { useState, useEffect, useRef, useCallback } from "react";
import { Events, Complements } from "../../index";

export default function Banner({
    data,
    interval,
}: {
    data: Banner.data[];
    interval: number;
}) {
    const [currentIndex, setCurrentIndex] = useState<number>(-1);
    const [isAnimating, setIsAnimating] = useState<boolean>(false);
    const intervalRef = useRef<any | null>(null);
    const imagesLoaded = useRef<boolean>(false);
    const directionRef = useRef<"next" | "prev">("next");
    const int: number = interval || 5000;

    const preloadImages: () => void = useCallback(
        () => Events.Banner.preloadImages(data, imagesLoaded),
        [data]
    );

    const startInterval: () => void = useCallback(() => {
        intervalRef.current = setInterval(() => {
            setCurrentIndex((prevIndex) => (prevIndex + 1) % data.length);
        }, int);
    }, [data.length]);

    const stopInterval: () => void = useCallback(() => {
        if (intervalRef.current) return clearInterval(intervalRef.current);
    }, []);

    const handleTransitionEnd = useCallback(() => setIsAnimating(false), []);

    useEffect(() => {
        preloadImages();
        startInterval();

        return () => stopInterval();
    }, [preloadImages, startInterval, stopInterval]);

    if (!imagesLoaded.current) {
        return <section className="animate-pulse bg-gray-200 h-64 w-full" />;
    }

    return (
        <section className="relative w-full overflow-hidden">
            <div
                className="flex transition-transform duration-700"
                style={{
                    transform: isAnimating
                        ? directionRef.current === "next"
                            ? `translateX(-${100 * (currentIndex - 1)}%)`
                            : `translateX(${100 * (currentIndex + 1)}%)`
                        : `translateX(-${100 * currentIndex}%)`,
                }}
                onTransitionEnd={handleTransitionEnd}
            >
                {data.map((item, index) => (
                    <picture
                        key={`banner-pic-${index}`}
                        className="w-full m-auto max-h-56 flex-shrink-0"
                    >
                        <source
                            srcSet={item.responsive}
                            media="(max-width: 767px)"
                        />
                        <source srcSet={item.img} media="(min-width: 768px)" />
                        <img
                            src={item.img}
                            alt={item.text}
                            loading="eager"
                            className="w-full object-contain max-h-56 flex-shrink-0"
                        />
                    </picture>
                ))}
            </div>
            <div className="absolute top-1/2 transform -translate-y-1/2 w-full text-center justify-between px-4">
                {/* <button
                    onClick={goToPrevious}
                    className="text-white p-2 rounded-full"
                >
                    {"〈"}
                </button> */}
                <div className="text-white py-2 px-20 rounded">
                    <Complements.Child
                        item={data[currentIndex].text}
                        name={"leyenda"}
                    />
                </div>
                {/* <button
                    onClick={goToNext}
                    className="text-white p-2 rounded-full"
                >
                    {"〉"}
                </button> */}
            </div>
            <div className="flex justify-center mt-2">
                {data.map((_, index) => (
                    <button
                        key={`banner-${index}`}
                        className={`mx-2 w-2.5 h-2.5 rounded-full cursor-default ${
                            currentIndex === index
                                ? "bg-blue-500 darkButton"
                                : "bg-gray-300 dark:bg-white"
                        }`}
                    />
                ))}
            </div>
        </section>
    );
}