import React from "react";
import { CollapseControls, Collapser } from "./components/collapse.tsx";

type StateArgs = {done?:boolean, open?:boolean};
type StateObj = {done:boolean, open:boolean};
type StateBinding = [state:StateObj, update:(args:StateArgs)=>void];

const CTX = React.createContext([{done:true, open:false}, (args)=>{}] as StateBinding);

export default ()=>
{
    const [stateGet, stateSet] = React.useState({done:true, open:false} as StateObj);
    const setter =(args:StateArgs)=> stateSet({...stateGet, ...args});

    return <CTX.Provider value={[stateGet, setter]}>
        <Inner/>
    </CTX.Provider>;
}

const Inner =()=>
{
    const [stateGet, stateSet] = React.useContext(CTX);
    const refElement = React.useRef( null );
    const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );

    React.useEffect(()=>
    {
        refControl.current = Collapser(refElement.current, true);
    }
    , []);

    React.useEffect(()=>
    {
        console.log("open changed to:", stateGet.open);
        refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}));
        
    }, [stateGet.open])

    React.useEffect(()=>{
        console.log("done changed to:", stateGet.done);
    }, [stateGet.done])

    return <div class="p-4">
        <p>{JSON.stringify(stateGet)}</p>
        <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:!stateGet.open, done:false})}>click</button>
        <div ref={refElement}>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
        </div>
    </div>;

};