import {useRef} from 'react';
import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect";
import {diabetesTheorem, nextButton, opening, toChapter} from "../../public/lit/texts";
import {useAnimate} from "../hooks/useAnimate";
import {useTranslate} from "../hooks/useTranslate";

const Opening = () => {
    const firstTheoremText = useTranslate(diabetesTheorem);
    const nextButtonText = useTranslate(nextButton);
    const chapter2Text = useTranslate(toChapter) + "2";
    const typewriterRef = useRef<TypewriterClass>();

    const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
        typewriterRef,
        link: '/opening',
        text: opening
    });

    return (
        <>
            <div className=" mt-8 ">
                <p className="text-2xl bg-red-200 font-primary border border-red-800 w-max justify-self-center inline p-4 animate-fade-in">
                    {firstTheoremText}
                </p>
            </div>

            <div className="flex items-center justify-center">
                <div className="w-screen">
                    <div className="text mt-12">
                        <div id="intro-text" className="font-speech max-w-md"
                             style={{position: 'absolute', top: 300, left: 150, right: 900}}>

                            <Typewriter
                                options={{
                                    delay: 40,
                                }}
                                onInit={(typewriter) => onInit({ typewriter, pauseFor: 3400 })}
                            />
                        </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">
                        <button
                            onClick={handleClick}
                            className={`border-4 border-black font-primary ${
                                !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
                            }`}
                        >
                            {isLast ? chapter2Text : nextButtonText}
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
};
export default Opening;