import "./ui_template_workflow_layout.css";

export interface WorkflowLayoutOptions {
  title: string;
  steps: string[];
  activeStep: number;
  leftPanel: HTMLElement;
  mainContent: HTMLElement;
  onMenuToggle?: (isOpen: boolean) => void;
}

export interface WorkflowLayoutHandle {
  root: HTMLElement;
  setMenuOpen: (isOpen: boolean) => void;
}

function createStepBar(steps: readonly string[], activeStep: number): HTMLElement {
  const bar = document.createElement("div");
  bar.className = "ui-workflow-layout__steps";
  steps.forEach((step, index) => {
    const item = document.createElement("span");
    item.className = "ui-workflow-layout__step";
    if (index === activeStep) item.classList.add("is-active");
    item.textContent = step;
    bar.append(item);
  });
  return bar;
}

export function createWorkflowLayout(options: WorkflowLayoutOptions): WorkflowLayoutHandle {
  const root = document.createElement("div");
  root.className = "ui-workflow-layout";

  const header = document.createElement("header");
  header.className = "ui-workflow-layout__header";

  const menuButton = document.createElement("button");
  menuButton.type = "button";
  menuButton.className = "ui-workflow-layout__menu-button";
  menuButton.setAttribute("aria-label", "Toggle workflow menu");
  menuButton.textContent = "☰";

  const titleWrap = document.createElement("div");
  titleWrap.className = "ui-workflow-layout__title-wrap";
  const title = document.createElement("h2");
  title.className = "ui-workflow-layout__title";
  title.textContent = options.title;
  titleWrap.append(title, createStepBar(options.steps, options.activeStep));

  header.append(menuButton, titleWrap);

  const body = document.createElement("div");
  body.className = "ui-workflow-layout__body";

  const aside = document.createElement("aside");
  aside.className = "ui-workflow-layout__panel";
  aside.append(options.leftPanel);

  const main = document.createElement("main");
  main.className = "ui-workflow-layout__main";
  main.append(options.mainContent);

  body.append(aside, main);
  root.append(header, body);

  function setMenuOpen(isOpen: boolean): void {
    root.classList.toggle("is-menu-open", isOpen);
    menuButton.setAttribute("aria-expanded", String(isOpen));
    options.onMenuToggle?.(isOpen);
  }

  menuButton.addEventListener("click", () => setMenuOpen(!root.classList.contains("is-menu-open")));
  main.addEventListener("click", () => {
    if (root.classList.contains("is-menu-open")) setMenuOpen(false);
  });
  setMenuOpen(true);

  return { root, setMenuOpen };
}