/** @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:{},
    PartGroup:{
        display: `flex`,
        flexWrap: `wrap`
    },
    Part:{
        border: `1px solid black`,
        borderRadius: `5px`,
        padding: `1rem`
    }
});

async function PickHandle()
{
    handle = await showDirectoryPicker();
    await FSHandle.setDirectoryHandle(handle);
    await LoadHandleFiles();
}
async function LoadHandleFiles()
{
    try
    {
        const module = await import("./data/room.js"+"?rand="+Math.random());
        /** @type {Record<string, TYPES.GraphParts>} */
        const read = module.default();
        rooms.val = read;
    }
    catch(_e)
    {
        rooms.val = {};
    }
}
/** @type {Van.State<Record<string, TYPES.GraphParts>>} */
const rooms = van.state({});
let handle = await FSHandle.getDirectoryHandle();
await LoadHandleFiles();


/** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */
function Room(room_id, graphParts)
{
    const rerender = van.state(0);
    return Div.Plain(

        Div.Plain("Passes:"),
        Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
            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[pass.live ? "dump" : "load"]();
                                rerender.val++
                            }},
                            pass.live ? "Dump" : "Load"
                        )
                    },
                )
            }
        }),

        Div.Plain("Parts"),
        Div.PartGroup(
            Object.entries(graphParts.Part).map(([part_id, part])=>{

                return ()=>{

                    rerender.val;

                    const work = []
                    for(const [_pass_ref, data] of part.pass)
                    {

                        work.push(Div.Part(
                            DOM.h5("Pass:", _pass_ref.name),
                            DOM.p(data.time),
                            data.work.map(([time, data, user])=>Div.Plain(
                                DOM.span(time),
                                " ",
                                DOM.strong(data),
                            ))
                        ))
                    }

                    return Div.Part(
                        DOM.h3("Part:", part.name),
                        ...work
                    );
                }

            }),
        ),

        Div.Plain("Desks"),
        Div.PartGroup(
            Object.entries(graphParts.Desk).map(([desk_id, desk])=>{

                return ()=>{

                    rerender.val;

                    /** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:TYPES.Flag)=>HTMLElement|null} */
                    const Iterator = (part, index, pass, dirty)=>{

                        const partPass = part.pass.get(pass);
                        if(partPass)
                        {
                            const time = partPass.time;
                            const latest = partPass.work.find(t=>t[0] == time);


                            return Div.Plain(
                                part.name,
                                DOM.p( dirty.need.includes(index) ? "Dirty" : "Good!" ),
                                Div.Part(
                                    time, " ", latest?.[1] || ""
                                )
                            );
                        }
                        return null;
                    }

                    const work = [];
                    for(const [pass, dirty] of desk.pass)
                    {
                        work.push(Div.Part(
                            DOM.h5("Pass:", pass.name),
                            Div.Part(
                                DOM.h4("Need:"),
                                desk.need.map((part, index)=>Iterator(part, index, pass, dirty))
                            ),
                            Div.Part(
                                DOM.h4("Make:"),
                                desk.make.map((part, index)=>Iterator(part, index, pass, dirty))
                            )
                        ))
                    }

                    return Div.Part(
                        DOM.h3("Desk:", desk.name),
                        work
                    )
                }

            }),
        ),

    )
}

function App()
{
    return Div.Plain(
        DOM.button({onclick:PickHandle}, "Pick Directory"),
        Object.entries(rooms.val).map(([room_id, graphParts])=>
            Room(room_id, graphParts)
        )
    )
}

van.add(document.body, App);