/** @import * as TYPES from "./types.ts" */

import * as FSHandle from "./store-directory-handle.js";

/** @type {(type:string, attributes?:Record<string, string>, ...children:Array<string|HTMLElement>)=>HTMLElement} */
const H =(type, attributes={}, ...children)=> {
  const el =document.createElement(type);
  Object.entries(attributes).forEach(([name, data])=>{
    if(name.startsWith("on"))
    {
      el.addEventListener(name.substring(2), data);
    }
    else
    {
      el.setAttribute(name, data)
    }
    
  });
  
  children.forEach(child=>
  {
    el.appendChild(typeof child == "string" ? document.createTextNode(child) : child);
  });
  return el;
}
const button = H("button");
const listRoom = H("ul");

/** @type {(errorAction?:()=>void)=>Promise<void>} */
async function ReloadAndRedraw(errorAction = ()=>{})
{
  listRoom.innerHTML = "";

  try
  {
    const handle = await FSHandle.getDirectoryHandle();
    if(!handle)
    {
      console.log("no fs handle")
      throw new Error("no fs handle set yet")
    }
    button.setAttribute("disabled", true);
    button.innerText = "loading...";

    const module = await import("./data/room.js"+"?rand="+Math.random());
    /** @type {Record<string, TYPES.GraphParts>} */
    const rooms = module.default();
    button.innerText = "change directory";
    console.log("rooms loaded:", rooms);

    Redraw(rooms);

  }
  catch(e)
  {
    errorAction();
    button.innerText = "select directory";
  }
  button.removeAttribute("disabled")
}


function Redraw(rooms)
{
  Object.entries(rooms).forEach(([roomID, roomData])=>
  {
    const listPass = H("ul");
    Object.entries(roomData.Pass).forEach(([passID, passData])=>{

      listPass.appendChild(H("li", {}, 
        H("button", { onclick:async()=>
          {
            await passData.load();
            globalThis.ROOM=roomData;
            Redraw(rooms)
          } }, passData.name),
      ))
    });

    
    const listPart = H("ul");
    Object.entries(roomData.Part).forEach(([partId, partData])=>{

      const listWork = H("dl");

      partData.pass.entries().forEach(([pass, passMapper])=>{
        listWork.appendChild(H("dt", {}, pass.name))
        passMapper.work.forEach((w)=>{
          listWork.appendChild(H("dd", {}, w.join(" ")))
        })
      })

      listPart.appendChild(H("li", {}, 
        H("h2", {}, partData.name),
        listWork
      ));
    })

    listRoom.innerHTML = "";
    listRoom.appendChild(
      H("li", {},
        H("div", {}, roomID),
        listPass,
        H("div", {}, listPart)
      )
    );
  })
}

await ReloadAndRedraw();

button.addEventListener("click", async()=>
{
  const directory = await globalThis.showDirectoryPicker();
  await FSHandle.setDirectoryHandle(directory);
  await ReloadAndRedraw(()=>alert("Invalid directory"));
});

document.body.appendChild(button);
document.body.appendChild(listRoom);