"use client";
import { useEffect, useState } from 'react';
import React from 'react';
import { Circle } from '@/components/profile/svgs';
import { CirclesConfig } from '@/types/waves';

const bubbles: CirclesConfig[] = [
    { id: 1, width: 40, height: 40, left: '10%', initialTop: 10, scrollFactor: 0.5 },
    { id: 2, width: 120, height: 120, left: '20%', initialTop: 20, scrollFactor: 0.3 },
    { id: 3, width: 80, height: 80, left: '30%', initialTop: 30, scrollFactor: 0.8 },
    { id: 4, width: 120, height: 120, left: '40%', initialTop: 40, scrollFactor: 0.2 },
    { id: 5, width: 60, height: 60, left: '50%', initialTop: 50, scrollFactor: 0.6 },
    { id: 6, width: 100, height: 100, left: '60%', initialTop: 60, scrollFactor: 0.2 },
    { id: 7, width: 50, height: 50, left: '70%', initialTop: 70, scrollFactor: 0.5 },
    { id: 8, width: 80, height: 80, left: '75%', initialTop: 80, scrollFactor: 0.3 },
    { id: 9, width: 40, height: 40, left: '74%', initialTop: 90, scrollFactor: 0.8 },
    { id: 10, width: 70, height: 70, left: '10%', initialTop: 100, scrollFactor: 0.2 },
    { id: 11, width: 100, height: 100, left: '20%', initialTop: 110, scrollFactor: 1 },
    { id: 12, width: 120, height: 120, left: '30%', initialTop: 120, scrollFactor: 0.6 },
    { id: 13, width: 60, height: 60, left: '40%', initialTop: 130, scrollFactor: 0.2 },
    { id: 14, width: 80, height: 80, left: '50%', initialTop: 140, scrollFactor: 0.8 },
    { id: 15, width: 40, height: 40, left: '60%', initialTop: 150, scrollFactor: 0.3 },
    { id: 16, width: 110, height: 110, left: '70%', initialTop: 160, scrollFactor: 0.6 },
    { id: 17, width: 90, height: 90, left: '70%', initialTop: 170, scrollFactor: 0.2 },
    { id: 18, width: 70, height: 70, left: '60%', initialTop: 180, scrollFactor: 0.5 },
    { id: 19, width: 50, height: 50, left: '10%', initialTop: 190, scrollFactor: 0.9 },
    { id: 20, width: 30, height: 30, left: '35%', initialTop: 200, scrollFactor: 0.3 },
];

export default function Bubble() {
    const [scrolled, setScrolled] = useState<number>(0);

    useEffect(() => {
        const handleScroll = () => {
            setScrolled(window.scrollY);
        };

        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    const calculateRockPosition = (config: typeof bubbles[number]) => {
        const basePosition = `${config.initialTop}%`;

        return {
            position: 'absolute',
            left: config.left,
            top: `calc(${basePosition} - ${scrolled * config.scrollFactor}px)`,
            width: `${config.width}px`,
            height: `${config.height}px`,
        };
    };

    return (
        <section>
            <div className=' relative flex justify-center items-center'>
                <div className="relative w-full h-full">
                    {bubbles.map((config) => {
                        return (
                            <Circle key={config.id} className='fill-transparent stroke-white stroke-2 z-0' width={config.width} height={config.height} style={calculateRockPosition(config) as React.CSSProperties}/>
                        );
                    })}
                </div>
            </div>
        </section>
    );
}