import {createRoot} from "react-dom/client";
import {StrictMode, useEffect, useState} from "react";

const states = ['started', 'tick', 'ended'];
export function App(){
    const [state, setState] = useState(states[0])

    useEffect(()=>{
        let timeout: any;
        let nextState = states[states.indexOf(state)+1];
        if(nextState) {
            timeout = setTimeout(() => {
                console.log(`Test my sourcemap: ${nextState}`);
                setState(nextState)
            }, 10);
        }

        return ()=>{
            if(timeout) {
                clearTimeout(timeout);
            }
        }
    }, [state])

    return (<div style={{alignSelf: "center"}}>
        <b>{state}</b>
    </div>);
}

export async function start({root: rootContainer}: {root: HTMLElement}){
    if(!rootContainer) throw new Error("Missing root element");
    const root = createRoot(rootContainer);
    root.render(<StrictMode>
        <App />
    </StrictMode>);
}