import {SetStateAction, useEffect, useRef, useState} from 'react';
import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect";
import {opening} from "../../public/lit/texts";
import {useNavigate} from "react-router-dom";

const Opening = () => {

    const [paused, setPaused] = useState(false);
    const [, setAnimationObject] = useState(null);
    const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj);

    const [currentIndex, setCurrentIndex] = useState(0);
    const [isAnimationComplete, setIsAnimationComplete] = useState(false);
    const {EN} = opening[currentIndex];
    const typewriterRef = useRef<TypewriterClass>();
    const navigate = useNavigate();

    useEffect(() => {
        if (typewriterRef.current) {
            typewriterRef.current.deleteAll(0.0000000000000000000001);
            typewriterRef.current
                .typeString(EN)
                .start()
                .callFunction(() => {
                    setIsAnimationComplete(true);
                    setPaused(true)
                });
        }
    }, [EN]);

    const handleClick = () => {
        if(currentIndex == opening.length -1) {
            navigate('/opening');
        }
        if (isAnimationComplete) {
            setCurrentIndex((prevIndex) => (prevIndex + 1) % opening.length);
            setIsAnimationComplete(false);
            setPaused(true);
        }
    };

    return (
        <>
            <div className=" mt-8 ">
                <p className="text-2xl bg-red-200 border border-red-800 w-max justify-self-center inline p-4 animate-fade-in">
                    Diabetes is a disease in which the body is unable to produce a sufficient amount of insulin.
                </p>
            </div>

            <div className="flex items-center justify-center">

                <div className="max-w-screen">
                    <div className="text mt-12">
                        <div id="intro-text" className="font-speech"
                            style={{ position: 'absolute', top: 400, left: 0, right: 900 }}>

                            <Typewriter
                                options={{
                                    delay: 40,
                                }}
                                onInit={(typewriter) => {
                                    typewriterRef.current = typewriter;
                                    typewriter
                                        .pauseFor(3500)
                                        .typeString(EN)
                                        .start()
                                        .callFunction(() => {
                                            setIsAnimationComplete(true);
                                            setPaused(false);
                                        });
                                }}
                            />
                        </div>
                        <div className="flex justify-center">
                            <div
                                id="animation-container"
                            >
                                <AnimateCC
                                    animationName="opening"
                                    getAnimationObject={getAnimationObject}
                                    paused={paused}
                                />
                            </div>
                        </div>
                    </div>
                    <div className="flex justify-center">
                        {currentIndex == 0}
                        <button
                            onClick={handleClick}
                            className={`border-4 border-black font-primary ${
                                !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
                            }`}
                        >
                            {currentIndex == opening.length -1 ? 'To Chapter 2' : 'Next'}
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
};
export default Opening;