"use client";
import React, { useRef, useState, useEffect } from "react";
import { motion } from "framer-motion";
import style from "./AnimatedContainer.module.css";
import classNames from "classnames";

export interface AnimatedContainerProps {
    style?: React.CSSProperties;
    items?: number;
    color: string;
    duration?: number;
    minSize?: number; // Tamaño mínimo de los puntos
    maxSize?: number; // Tamaño máximo de los puntos
    children: React.ReactNode;
    className?: classNames.Argument;
}

export default function AnimatedContainer(props: AnimatedContainerProps) {
    const { items = 10, duration = 20, minSize = 40, maxSize = 150 } = props;
    const containerRef = useRef<HTMLDivElement>(null);
    const [containerSize, setContainerSize] = useState({ width: 200, height: 200 });
    const [isClient, setIsClient] = useState(false);
    const [dots, setDots] = useState([]);

    const sizeArray = Array.from(
        { length: 4 },
        (_, index) => minSize + (index * (maxSize - minSize)) / 3
    );

    useEffect(() => {
        setIsClient(true);

        const isMobile = window.matchMedia("(max-width: 768px)").matches;
        let dotItems = items;
        if (isMobile) {
            dotItems = 2;
        } else {
            dotItems = 5;
        }
        setDots(Array.from({ length: dotItems }));
    }, []);

    useEffect(() => {
        if (containerRef.current && isClient) {
            const updateSize = () => {
                setContainerSize({
                    width: containerRef.current?.offsetWidth || 200,
                    height: containerRef.current?.offsetHeight || 200,
                });
            };
            updateSize();

            window.addEventListener("resize", updateSize);
            return () => window.removeEventListener("resize", updateSize);
        }
    }, [isClient]);

    const getChildrenClassName = () => {
        if (props.className) {
            return classNames(props.className);
        }
        return classNames(style.childrenContainer);
    };

    if (!isClient) {
        return null;
    }

    return (
        <motion.div className={style.animatedContainer} style={props.style} ref={containerRef}>
            <div className={style.dotsContainer}>
                {dots.map((_, index) => (
                    <motion.div
                        key={index}
                        style={{
                            position: "absolute",
                            borderRadius: "50%",
                            backgroundImage: props.color
                                ? `radial-gradient(circle, ${props.color} 0%, rgba(255, 255, 255, 0.3) 100%)`
                                : undefined,
                        }}
                        initial={{
                            width: `${minSize}px`,
                            height: `${minSize}px`,
                            top: Math.random() * (containerSize.height - minSize),
                            left: Math.random() * (containerSize.width - minSize),
                            opacity: 1,
                        }}
                        animate={{
                            width: sizeArray,
                            height: sizeArray,
                            top: [
                                Math.random() * (containerSize.height - minSize),
                                Math.random() * (containerSize.height - minSize),
                                Math.random() * (containerSize.height - minSize),
                            ],
                            left: [
                                Math.random() * (containerSize.width - minSize),
                                Math.random() * (containerSize.width - minSize),
                                Math.random() * (containerSize.width - minSize),
                            ],
                            opacity: [0, 0.15, 0.25, 0.35, 0.5, 0.6, 0.5, 0.35, 0.25, 0.15, 0],
                        }}
                        transition={{
                            duration: duration,
                            repeat: Infinity,
                            ease: "easeIn",
                        }}
                    />
                ))}
            </div>
            {/* El contenido de los hijos está garantizado al frente */}
            <div className={getChildrenClassName()}>{props.children}</div>
        </motion.div>
    );
}
