"use client";

import { AnimatedGradiantLine } from "@/components/ui/lines";
import React, { useEffect, useState } from "react";
import { useInView } from "react-intersection-observer";
import {
    AnimatedConvoyageIcon,
    AnimatedDriverIcon,
    AnimatedExpensessIcon,
    AnimatedFleetIcon,
    AnimatedFuelIcon,
    AnimatedInspectionsIcon,
    AnimatedInvoicesIcon,
    AnimatedIssuesIcon,
    AnimatedRemindersIcon,
    AnimatedReportsIcon,
    AnimatedSettingsIcon,
    AnimatedTelematicsIcon,
    AnimatedVendorIcon,
} from "./AnimatedIcons";
import LandingSolutionsBox from "./LandingSolutionsBox";
import LandingSolutionsMainBox from "./LandingSolutionsMainBox";
import { AnimationWrapper } from "@/components/ui/animations";

const LandingPresentationGraphics = () => {
    const [currentAnimation, setCurrentAnimation] = useState(0);
    const { ref, inView } = useInView({
        threshold: 0.4,
    });
    useEffect(() => {
        let interval: NodeJS.Timeout | null = null;

        if (inView) {
            setCurrentAnimation(currentAnimation === 10 ? 1 : currentAnimation + 1)
            interval = setInterval(() => {
                setCurrentAnimation((prev) => (prev === 10 ? 1 : prev + 1));
            }, 3000);
        } else if (interval) {
            clearInterval(interval);
        }

        return () => {
            if (interval) clearInterval(interval);
        };
    /* eslint-disable react-hooks/exhaustive-deps */
}, [inView]);

    return (
        <AnimationWrapper staggerChildren={0.1}>
            <div ref={ref} className='relative   w-[500px] h-[600px]   max-sm:!scale-[0.68]'>
                <LandingSolutionsMainBox targetAnimation={[1, 2, 4, 5, 6, 7, 9, 10]} title='Vehicle' currentAnimation={currentAnimation} custom={0} className='top-[310px] left-[210px] z-[1]' />
                <div className="sm:animate-float ">
                    <div className="relative">
                        {/* Row1 */}
                        <LandingSolutionsBox link="/" targetAnimation={[10]} title='Reminders' icon={<AnimatedRemindersIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[10px] left-[110px]' />
                        {/* Row2 */}
                        <LandingSolutionsBox link="/" targetAnimation={[2, 10]} title='Services' icon={<AnimatedSettingsIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[110px] left-[10px]' />
                        <LandingSolutionsBox link="/" targetAnimation={[1, 3, 7]} title='Fleet' icon={<AnimatedFleetIcon custom={currentAnimation == 3 ? 0 : 1} />} currentAnimation={currentAnimation} custom={currentAnimation == 3 ? 0 : 1} className='top-[110px] left-[310px]' />
                        {/* Row3 */}
                        <LandingSolutionsBox link="/features/suivi-telematique-en-temps-reel" targetAnimation={[1]} title='Telematics' icon={<AnimatedTelematicsIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[210px] left-[110px]' />
                        <LandingSolutionsBox link="/" targetAnimation={[3, 8]} title='Expenses' icon={<AnimatedExpensessIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[210px] left-[410px]' />
                        {/* Row4 */}
                        <LandingSolutionsBox link="/" targetAnimation={[3, 5]} title='Driver' icon={<AnimatedDriverIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[310px] left-[10px]' />
                        <LandingSolutionsBox link="/features/rapports-personnalises-et-analytiques" targetAnimation={[4]} title='Reports' icon={<AnimatedReportsIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[310px] left-[410px]' />
                        {/* Row5 */}
                        <LandingSolutionsBox link="/" targetAnimation={[9]} title='Inspections' icon={<AnimatedInspectionsIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[410px] left-[10px]' />
                        <LandingSolutionsBox link="/" targetAnimation={[5]} title='Convoyage' icon={<AnimatedConvoyageIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[410px] left-[210px]' />
                        <LandingSolutionsBox link="/" targetAnimation={[2, 9]} title='Issues' icon={<AnimatedIssuesIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[410px] left-[410px]' />
                        {/* Row6 */}
                        <LandingSolutionsBox link="/" targetAnimation={[4, 6, 8]} title='Invoice' icon={<AnimatedInvoicesIcon custom={1} />} currentAnimation={currentAnimation} custom={currentAnimation == 8 ? 0 : 1} className='top-[510px] left-[110px]' />
                        <LandingSolutionsBox link="/features/suivi-de-la-consommation-de-carburant" targetAnimation={[6, 8]} title='Fuels' icon={<AnimatedFuelIcon custom={currentAnimation == 8 ? 0 : 1} />} currentAnimation={currentAnimation} custom={1} className='top-[510px] left-[310px]' />
                        <LandingSolutionsBox link="/" targetAnimation={[7]} title='Vendor' icon={<AnimatedVendorIcon custom={1} />} currentAnimation={currentAnimation} custom={1} className='top-[510px] left-[410px]' />
                    </div>
                    <div className='max-sm:hidden '>
                        <span>
                            <AnimatedGradiantLine first height='105px' width='105px' duration={1} animate={currentAnimation === 1} points={[{ x: 80, y: 90 }, { x: 80, y: 15 }, { x: 15, y: 15 }]} className="absolute top-[235px] left-[166px]" />
                            <AnimatedGradiantLine height='185px' width='105px' duration={1} animate={currentAnimation === 1} points={[{ x: 15, y: 185 }, { x: 15, y: 15 }, { x: 80, y: 15 }]} className="absolute top-[135px] left-[238px]" />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='190px' width='190px' duration={1} animate={currentAnimation === 2} points={[{ x: 180, y: 190 }, { x: 185, y: 15 }, { x: 15, y: 15 }]} className="absolute top-[135px] left-[70px] " />
                            <AnimatedGradiantLine height='190px' width='190px' duration={1} animate={currentAnimation === 2} points={[{ x: 15, y: 15 }, { x: 80, y: 15 }, { x: 80, y: 115 }, { x: 140, y: 115 }]} className="absolute top-[335px] left-[270px]" />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='255px' width='255px' duration={1} animate={currentAnimation === 3} points={[{ x: 255, y: 15 }, { x: 45, y: 15 }, { x: 45, y: 215 }, { x: 15, y: 215 },]} className="absolute top-[135px] left-[55px] " />
                            <AnimatedGradiantLine height='100px' width='100px' duration={1} animate={currentAnimation === 3} points={[{ x: 15, y: 15 }, { x: 80, y: 15 }, { x: 80, y: 80 }]} className="absolute top-[135px] right-[30px]" />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='30px' width='190px' duration={1} animate={currentAnimation === 4} points={[{ x: 15, y: 15 }, { x: 160, y: 15.1 },]} className="absolute top-[335px] left-[270px]" />
                            <AnimatedGradiantLine height='190px' width='190px' duration={1} animate={currentAnimation === 4} points={[{ x: 80, y: 15 }, { x: 15, y: 15 }, { x: 15, y: 185 },]} className="absolute top-[335px] left-[135px] " />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='90px' width='30px' duration={1} animate={currentAnimation === 5} points={[{ x: 15, y: 15 }, { x: 15.1, y: 50.1 },]} className="absolute top-[370px] left-[233px]" />
                            <AnimatedGradiantLine height='30px' width='190px' duration={1} animate={currentAnimation === 5} points={[{ x: 170, y: 15 }, { x: 15.1, y: 15.1 }]} className="absolute top-[335px] left-[70px] g" />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='190px' width='100px' duration={1} animate={currentAnimation === 6} points={[{ x: 80, y: 15 }, { x: 15, y: 15 }, { x: 15, y: 185 },]} className="absolute top-[335px] left-[135px] " />
                            <AnimatedGradiantLine height='190px' width='100px' duration={1} animate={currentAnimation === 6} points={[{ x: 15, y: 15 }, { x: 80, y: 15 }, { x: 80, y: 185 },]} className="absolute top-[335px] left-[270px] " />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='185px' width='105px' duration={1} animate={currentAnimation === 7} points={[{ x: 15, y: 185 }, { x: 15, y: 15 }, { x: 80, y: 15 }]} className="absolute top-[135px] left-[238px]" />
                            <AnimatedGradiantLine height='190px' width='220px' duration={1} animate={currentAnimation === 7} points={[{ x: 15, y: 15 }, { x: 80, y: 15 }, { x: 80, y: 165 }, { x: 177, y: 165 }, { x: 177, y: 185 }]} className="absolute top-[335px] left-[270px] " />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='30px' width='180px' duration={1} animate={currentAnimation === 8} points={[{ x: 155, y: 15 }, { x: 15, y: 15.1 }]} className="absolute top-[533px] left-[165px] " />
                            <AnimatedGradiantLine height='360px' width='100px' duration={1} animate={currentAnimation === 8} points={[{ x: 15, y: 290 }, { x: 15, y: 15 }, { x: 80, y: 15 }]} className="absolute top-[235px] right-[65px] " />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='190px' width='190px' duration={1} animate={currentAnimation === 9} points={[{ x: 15, y: 15 }, { x: 80, y: 15 }, { x: 80, y: 115 }, { x: 150, y: 115 }]} className="absolute top-[335px] left-[270px]" />
                            <AnimatedGradiantLine height='190px' width='190px' duration={1} animate={currentAnimation === 9} points={[{ x: 150, y: 15 }, { x: 80, y: 15 }, { x: 80, y: 115 }, { x: 15, y: 115 }]} className="absolute top-[335px] left-[60px]" />
                        </span>
                        <span>
                            <AnimatedGradiantLine height='300px' width='110px' duration={1} animate={currentAnimation === 10} points={[{ x: 100, y: 290 }, { x: 100, y: 15 }, { x: 15, y: 15 }]} className="absolute top-[35px] left-[154px] " />
                            <AnimatedGradiantLine height='200px' width='210px' duration={1} animate={currentAnimation === 10} points={[{ x: 200, y: 190 }, { x: 200, y: 15 }, { x: 15, y: 15 }]} className="absolute top-[135px] left-[45px] " />
                        </span>
                    </div>
                </div>
            </div>
        </AnimationWrapper>
    )
}

export default LandingPresentationGraphics