import React, {ReactNode, useState, useEffect} from "react";
import Hello from "../../SVG/Hello";
import Close from "../../SVG/Close";
import helperIcon from "../../../assets/images/helper-icon.svg";
import 'animate.css';
import "./AnimatedGuideHelper.scss";

type AnimatedGuideHelperProps = {
    initialOpen: boolean
    children:ReactNode;
}
const AnimatedGuideHelper = (props: AnimatedGuideHelperProps) => {
    const [isOpen, setIsOpen] = useState<boolean>(props.initialOpen);
    const [bounce, setBounce] = useState<boolean>(false);

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

        return () => clearInterval(interval);
      }, []);

    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'}>
                <img
                    width="71"
                    height="70"
                    className={"icon"}
                    src={helperIcon}
                    alt=""
                />
            </div>
            {
                isOpen &&
                <div className='animated-guidehelperalt-text-wrapper'>
                    <div className="fade-in">
                        {props.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;