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

import Styles from "./styles.js";
const {DOM, Div, Tag} = Styles;

async function PickHandle()
{
    handle = await showDirectoryPicker();
    await FSHandle.setDirectoryHandle(handle);
    await LoadHandleFiles();
}
async function LoadHandleFiles()
{
    console.log("fetching room.js", handle);
    if(handle)
    {
        try
        {
            const module = await import("./graph/room.js"+"?bust="+Math.random());
            /** @type {Record<string, TYPES.GraphParts>} */
            const read = module.default();
            rooms.val = read;
        }
        catch(_e)
        {
            console.log("the handle exists, but the request failed. the service work must not be ready yet.")
            rooms.val = {};
        }
    }
    else
    {
        console.log("no fs handle has been set, cannot get room graph")
        rooms.val = {};
    }
}

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



/** @type {Van.State<TYPES.User|false>} */
const loggedIn = van.state(false);

const blocking = van.state(false);

const showDesks = van.state(true, "desks");

/** @type {(inParts:Record<string, TYPES.Part>)=>HTMLElement} */
function Parts(inParts)
{
    return Div.Plain(
        Div.Plain("Parts"),
        Div.PartGroup(
            Object.entries(inParts).map(([part_id, part])=>{

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

                    work.push(Div.Part(
                        DOM.h5(pass.name),
                        DOM.p(data.time),
                        data.work.map(([time, data, user])=>Div.Plain(
                            DOM.span(time),
                            " ",
                            DOM.strong(data),
                        )),
                        Div.Plain(
                            loggedIn.val ? DOM.button({onclick(){
                                blocking.val = true;
                                loggedIn.val && data.make(loggedIn.val, "NEW").then(()=>{
                                    blocking.val = false;
                                });
                            }}, "Add work!")
                            : null
                        )
                    ))
                }

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

            }),
        )
    )
}

/** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */
function Desks(inDesks)
{
    return Div.Plain(
        Div.Plain("Desks"),
        Div.PartGroup(
            Object.entries(inDesks).map(([desk_id, desk])=>{

                loggedIn.val;

                if(loggedIn.val)
                {
                    for(const role of desk.role)
                    {
                        if(!role.user.includes(loggedIn.val))
                        {
                            return null;
                        }
                    }
                }

                /** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:number[])=>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 DOM.td(
                            Div.Part(
                                {class: dirty.includes(index) ? Tag("DeskDirty") : ""},
                                latest?.[1] || ""
                            )
                        );
                    }
                    return null;
                }

                const work = [];
                for(const [pass, dirty] of desk.pass)
                {
                    work.push(DOM.tr(
                        DOM.td(pass.name),
                        desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need)),
                        DOM.td("->"),
                        desk.make.map((part, index)=>Iterator(part, index, pass, dirty.make))
                    ))
                }

                return Div.DeskContainer(
                    DOM.h3(desk.name),
                    DOM.table(
                        DOM.thead(
                            DOM.th(),
                            desk.need.map((part, index)=>DOM.th(part.name)),
                            DOM.th(),
                            desk.make.map((part, index)=>DOM.th(part.name))
                        ),
                        work
                    )
                )


            }),
        )
    )
}

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

    return Div.Plain(

        Div.Plain("Users:"),
        Div.PartGroup(
            Object.entries(graphParts.User).map(([user_id, user])=>{
                return ()=>{
                    return Div.Part(
                        DOM.div.Plain(user.name),
                        ()=>{
                            return DOM.button.Plain(
                                {onclick(){
                                    loggedIn.val = (loggedIn.val == user) ? false : user;
                                }},
                                loggedIn.val == user ? "this is me" : "impersonate"
                            )
                        },
                    )
                }
            })
        ),


        Div.Plain("Passes:"),
        Div.PartGroup(
            Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
                return ()=>{
                    console.log("rerendering...", rerender.rawVal);

                    rerender.val;

                    return Div.Part(
                        DOM.div.Plain(pass.name),
                        ()=>{
                            return DOM.button.Plain(
                                {async onclick(){
                                    await pass[pass.live ? "dump" : "load"]();
                                    rerender.val++
                                }},
                                pass.live ? "Dump" : "Load"
                            )
                        },
                    )
                }
            })
        ),

        ()=>{
            return DOM.button({onclick(){
                showDesks.val = !showDesks.val;
            }}, showDesks.val ? "Show Parts" : "Show Desks")
        },

        ()=>{
            rerender.val;
            return showDesks.val ? Desks(graphParts.Desk) : Parts(graphParts.Part);
        },


        ()=>{
            return blocking.val ? Div.BlockScreen() : null
        }

    )
}

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);