import { w2layout, w2ui } from "../../vendor/w2ui";
import { getCurrentUser, clearSession } from "../../services/authState";
import { loadFolders } from "./modules/folders";
import { bindModelActions } from "./modules/models";
import { renderLogin } from "../login/login";
import "./app.css";
import "./dialogs.css";

export async function renderApp() {
  const currentUser = getCurrentUser();
  const isAdmin = currentUser?.role === "admin";
  const isFixedLogin = document.body.dataset.authMode === "fixed";
  document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
    <div class="app-shell">
      <header class="topbar">
        <div>
          <strong>DMT 模型库</strong>
          <span id="folderCrumb">未选择目录</span>
        </div>
        <div class="topbar-actions">
          <span>${currentUser?.username ?? ""}</span>
          ${isFixedLogin ? "" : `<button id="logoutBtn" class="icon-text-btn">退出</button>`}
        </div>
      </header>
      <section id="workspaceLayout" class="workspace"></section>
      <template id="treePanelTemplate">
        <aside class="tree-pane">
          <div id="folderTree"></div>
        </aside>
      </template>
      <template id="modelPanelTemplate">
        <main class="content-pane">
          <div class="content-toolbar">
            <div class="content-actions">
              ${isAdmin ? `<button id="manageUsersBtn" type="button">人员权限</button>` : ""}
              ${isAdmin ? `<button id="manageDictionariesBtn" type="button">字典维护</button>` : ""}
              ${isAdmin ? `<button id="addProcessModelBtn" type="button" hidden>上传工艺模型</button>` : ""}
              ${isAdmin ? `<button id="addModelBtn1" class="primary-btn" type="button" hidden>增加模型</button>` : ""}
            </div>
          </div>
          <div class="filter-toolbar">
            <label>
              <span>品牌</span>
              <select id="brandFilter">
                <option value="">全部品牌</option>
              </select>
            </label>
            <label>
              <span>类型</span>
              <select id="typeFilter">
                <option value="">全部类型</option>
              </select>
            </label>
            <label class="keyword-filter">
              <span>关键字</span>
              <input id="keywordFilter" placeholder="模型名 / 文件名 / 属性" />
            </label>
            <button id="resetFilterBtn" type="button">重置</button>
            <button id="addModelBtn" class="primary-btn" type="button">增加模型</button>
          </div>
          <div id="modelGrid" class="model-grid"></div>
          <footer id="modelPagination" class="pagination"></footer>
        </main>
      </template>
    </div>
  `;

  renderWorkspaceLayout();

  document.querySelector("#logoutBtn")?.addEventListener("click", () => {
    clearSession();
    renderLogin(renderApp);
  });

  bindModelActions();
  await loadFolders();
}

function renderWorkspaceLayout() {
  const workspace = document.querySelector<HTMLDivElement>("#workspaceLayout")!;
  const treeTemplate = document.querySelector<HTMLTemplateElement>("#treePanelTemplate")!;
  const modelTemplate = document.querySelector<HTMLTemplateElement>("#modelPanelTemplate")!;
  const existingLayout = w2ui.modelLibraryLayout;
  if (existingLayout?.destroy) {
    existingLayout.destroy();
  }
  const layout = new w2layout({
    name: "modelLibraryLayout",
    padding: 0,
    panels: [
      {
        type: "left",
        size: 180,
        minSize: 150,
        resizable: true,
        overflow: "hidden",
        html: treeTemplate.innerHTML
      },
      {
        type: "main",
        overflow: "hidden",
        html: modelTemplate.innerHTML
      }
    ]
  });

  layout.render(workspace);
}