import { GlobalRegistrator } from "@happy-dom/global-registrator";
if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
import { expect, test } from "bun:test";
import { act } from "react";
import { createRoot } from "react-dom/client";
import { CollapsibleSection } from "./Section.tsx";

test("sections collapse independently, preserve drafts and actions, and remember their state", () => {
  const budgetKey = "budget2:test-expand-budget";
  const purchasesKey = "budget2:test-expand-purchases";
  localStorage.removeItem(budgetKey);
  localStorage.removeItem(purchasesKey);
  const container = document.createElement("div");
  let root = createRoot(container);
  const render = () => root.render(<>
    <CollapsibleSection title="Budget" preferenceKey={budgetKey}><input aria-label="Budget draft" defaultValue="" /></CollapsibleSection>
    <CollapsibleSection title="Purchases" preferenceKey={purchasesKey} action={<button>Add purchase</button>}><p>Purchase rows</p></CollapsibleSection>
  </>);
  try {
    act(render);
    const input = container.querySelector("input")!;
    input.value = "Unsaved draft";
    const collapse = container.querySelector('button[aria-label="Collapse Budget"]') as HTMLButtonElement;
    act(() => collapse.click());
    expect(input.closest("[hidden]")).not.toBeNull();
    expect(container.querySelector('button[aria-label="Collapse Purchases"]')).not.toBeNull();
    act(() => (container.querySelector('button[aria-label="Expand Budget"]') as HTMLButtonElement).click());
    expect(input.value).toBe("Unsaved draft");
    expect(input.closest("[hidden]")).toBeNull();
    act(() => (container.querySelector('button[aria-label="Collapse Purchases"]') as HTMLButtonElement).click());
    const add = [...container.querySelectorAll("button")].find(button => button.textContent === "Add purchase")!;
    expect(add.closest("[hidden]")).toBeNull();
    act(() => root.unmount());
    root = createRoot(container);
    act(render);
    expect(container.querySelector('button[aria-label="Collapse Budget"]')).not.toBeNull();
    expect(container.querySelector('button[aria-label="Expand Purchases"]')).not.toBeNull();
  } finally {
    act(() => root.unmount());
    localStorage.removeItem(budgetKey);
    localStorage.removeItem(purchasesKey);
  }
});