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

const lines: LinesConfig[] = [
    { id: 1, width: 100, height: 100, left: '5%', initialTop: 300, scrollFactor: 0.8 },
    { id: 2, width: 120, height: 120, left: '15%', initialTop: 350, scrollFactor: 0.6 },
    { id: 3, width: 80, height: 80, left: '25%', initialTop: 400, scrollFactor: 0.4, bottom: true },
    { id: 4, width: 70, height: 70, left: '35%', initialTop: 450, scrollFactor: 0.7, bottom: true },
    { id: 5, width: 120, height: 120, left: '45%', initialTop: 500, scrollFactor: 0.5, bottom: true, flipped: true },
    { id: 6, width: 50, height: 50, left: '55%', initialTop: 550, scrollFactor: 0.2, bottom: true, flipped: true },
    { id: 7, width: 70, height: 70, left: '65%', initialTop: 600, scrollFactor: 0.4, bottom: true },
    { id: 8, width: 90, height: 90, left: '75%', initialTop: 650, scrollFactor: 0.6 },
    { id: 9, width: 100, height: 100, left: '35%', initialTop: 700, scrollFactor: 0.8 },
    { id: 10, width: 120, height: 120, left: '65%', initialTop: 750, scrollFactor: 0.6 },
    { id: 11, width: 80, height: 80, left: '10%', initialTop: 800, scrollFactor: 0.4 },
    { id: 12, width: 130, height: 130, left: '20%', initialTop: 850, scrollFactor: 0.5 },
    { id: 13, width: 110, height: 110, left: '30%', initialTop: 900, scrollFactor: 0.7, flipped: true },
    { id: 14, width: 70, height: 70, left: '40%', initialTop: 300, scrollFactor: 0.7 },
    { id: 15, width: 120, height: 120, left: '50%', initialTop: 350, scrollFactor: 0.5, flipped: true },
    { id: 16, width: 50, height: 50, left: '60%', initialTop: 400, scrollFactor: 0.2 },
    { id: 17, width: 70, height: 70, left: '70%', initialTop: 450, scrollFactor: 0.4 },
    { id: 18, width: 90, height: 90, left: '73%', initialTop: 500, scrollFactor: 0.6 },
    { id: 19, width: 100, height: 100, left: '68%', initialTop: 550, scrollFactor: 0.8 },
    { id: 20, width: 120, height: 120, left: '5%', initialTop: 600, scrollFactor: 0.6 },
    { id: 21, width: 80, height: 80, left: '15%', initialTop: 650, scrollFactor: 0.4 },
    { id: 22, width: 70, height: 70, left: '25%', initialTop: 700, scrollFactor: 0.7 },
    { id: 23, width: 120, height: 120, left: '35%', initialTop: 750, scrollFactor: 0.5, flipped: true },
    { id: 24, width: 50, height: 50, left: '45%', initialTop: 800, scrollFactor: 0.2, flipped: true },
    { id: 25, width: 70, height: 70, left: '55%', initialTop: 850, scrollFactor: 0.4 },
    { id: 26, width: 90, height: 90, left: '65%', initialTop: 900, scrollFactor: 0.6 },
    { id: 27, width: 100, height: 100, left: '70%', initialTop: 300, scrollFactor: 0.8 },
];

export default function Speed() {
    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 lines[number]) => {
        const basePosition = config.bottom
            ? `calc(100% - ${config.initialTop}%)`
            : `${config.initialTop}%`;

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

    return (
        <section>
            <div className='h-[20vh] relative flex justify-center items-center'>
                <div className="relative w-full h-full">
                    {lines.map((config) => {
                        return (
                            <Line key={config.id} className="fill-slate-400" width={config.width} height={config.height} style={calculateRockPosition(config) as React.CSSProperties}/>
                        );
                    })}
                </div>
            </div>
        </section>
    );
}