// @vitest-environment happy-dom
import { beforeEach, describe, expect, it } from "vitest";

import { OPEN_SPAWN_EVENT, SPAWN_SIMILAR_EVENT } from "./catalog.js";
import { installDrawer, type Drawer } from "./drawer.js";

function mount(): { shell: HTMLElement; sidebar: HTMLElement; drawer: Drawer } {
  const shell = document.createElement("div");
  const sidebar = document.createElement("aside");
  const backdrop = document.createElement("div");
  const row = document.createElement("div");
  row.className = "tree-leaf";
  sidebar.appendChild(row);
  shell.append(sidebar, backdrop);
  document.body.replaceChildren(shell);
  const drawer = installDrawer(shell, sidebar, backdrop);
  drawer.open();
  return { shell, sidebar, drawer };
}

describe("mobile drawer", () => {
  beforeEach(() => document.body.replaceChildren());

  it("closes when a session row is tapped", () => {
    const { shell, sidebar } = mount();
    (sidebar.querySelector(".tree-leaf") as HTMLElement).click();
    expect(shell.classList.contains("drawer-open")).toBe(false);
  });

  it("closes when a spawn is requested", () => {
    const { shell } = mount();
    document.dispatchEvent(new CustomEvent(OPEN_SPAWN_EVENT));
    expect(shell.classList.contains("drawer-open")).toBe(false);
  });

  it("closes when spawn similar is requested", () => {
    const { shell } = mount();
    document.dispatchEvent(new CustomEvent(SPAWN_SIMILAR_EVENT, { detail: {} }));
    expect(shell.classList.contains("drawer-open")).toBe(false);
  });

  it("leaves the backdrop click closing it", () => {
    const { shell } = mount();
    (shell.lastElementChild as HTMLElement).click();
    expect(shell.classList.contains("drawer-open")).toBe(false);
  });
});