import { JSX, useEffect, useState } from "react"
import { FEAR_SETTINGS, fearState } from "../state"

import './finale-text.css';

export default function FinaleText() {
    const [progression, setProgression] = useState(fearState.finaleProgression);
    const [wasCaught, setWasCaught] = useState(fearState.isRustActive);

    useEffect(() => {
        const unsubscribe = fearState.subscribe(() => {
            setProgression(fearState.finaleProgression);
            setWasCaught(fearState.wasCaught)
        });
        return () => unsubscribe();
    });

    let elementCount = (FEAR_SETTINGS.EVENT_FINALE_TEXT_COUNT / FEAR_SETTINGS.EVENT_FINALE_DURATION) * progression;

    let testElements: Array<JSX.Element> = [];

    for (let x = 0; x < elementCount; x++)
        testElements.push(<span className="finale-text" key={x}>the deal has been sealed</span>)


    if (wasCaught)
        return (<>
            <div className="finale-container">
                {testElements}
            </div>
            <div className="scanlines" />
        </>)

    return <></>
}