import React, {ReactNode, useEffect, useState} from "react";
import Hello from "../../SVG/Hello";
import Close from "../../SVG/Close";
import 'animate.css';
import "./AnimatedGuideHelper.scss";
import Govoulis from "../../SVG/Govoulis";

type AnimatedGuideHelperProps = {
    initialOpen?: boolean
    children:ReactNode;
}

const AnimatedGuideHelper = ({initialOpen = true, children}: AnimatedGuideHelperProps) => {

    const [isOpen, setIsOpen] = useState<boolean>(initialOpen);
    const [bounce, setBounce] = useState<boolean>(false);

    useEffect(() => {
        const interval = setInterval(() => {
            setBounce((prevBounce) => !prevBounce);
        }, 3000);

        return () => clearInterval(interval);
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);

    return (
        <div id="guidehelperalt" className={isOpen ? 'animated-guidehelperalt-wrapper expanded-wrapper' : 'animated-guidehelperalt-wrapper'}>
            <div onClick={() => {setIsOpen(true)}} className={isOpen ? 'animated-guidehelperalt-image-wrapper expanded-image-wrapper' : 'animated-guidehelperalt-image-wrapper'}>
                <Govoulis
                    colorWhite={'var(--white)'}
                    colorBlue={'var(--secondary-color)'}/>
            </div>
            {
                isOpen &&
                <div className='animated-guidehelperalt-text-wrapper'>
                    <div className="fade-in">
                        {children}
                    </div>
                </div>
            }

            {
                !isOpen
                ?
                <div className={bounce ? "animate__animated animate__rubberBand wave-img-wrapper" : "wave-img-wrapper"}>
                    <Hello/>
                </div>
                :
                <div onClick={() => {setIsOpen(false)}} className="close-img-wrapper">
                    <Close color="#fff"/>
                </div>

            }

        </div>
    );
}
export default AnimatedGuideHelper;