/** @import * as TYPES from "./graph/types.ts" */
import * as FSHandle from "./store-directory-handle.js";

const {Div, DOM} = Gale({
    Title:{
        padding:"2rem",
        background: "blue",
        color:"white"
    },
    Plain:{}
})

/** @type {Van.State<Record<string, TYPES.GraphParts>>} */
const rooms = van.state({});

async function EvaluateHandle()
{
    try
    {
        const module = await import("./data/room.js"+"?rand="+Math.random());
        /** @type {Record<string, TYPES.GraphParts>} */
        const read = module.default();
        console.log("rooms found:", read);
        rooms.val = read;
    }
    catch(e)
    {
        console.log("rooms read error:", e);
        rooms.val = {};
    }
}
let handle = await FSHandle.getDirectoryHandle();
EvaluateHandle();

/** @type {(pass:TYPES.Pass, parts:TYPES.GraphParts)=>()=>HTMLElement} */
function Pass(pass, parts)
{
    const rerender = van.state(0);
    return ()=>{
        console.log("rerendering...", rerender.val)
        return Div.Plain(
            Div.Title(
                DOM.div.Plain(pass.name),
                DOM.span.Plain(pass.path),
            ),
            ()=>{
                return DOM.button.Plain(
                    {async onclick(){
                        await pass.load();
                        rerender.val++
                    }},
                    pass.live ? "Dump" : "Load"
                )
            },

        )
    }
}


function App()
{
    return Div.Plain(
        DOM.button({
            async onclick(){
                handle = await showDirectoryPicker();
                await FSHandle.setDirectoryHandle(handle);
                EvaluateHandle();
            }
        }, "Pick Directory"),
        Object.entries(rooms.val).map(([room_id, graphParts])=>
            Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
                return Pass(pass, graphParts)
            })
        )
    )
}

van.add(document.body, App);