// @vitest-environment jsdom

import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";

import { Button, ControlSectionHeader, PanelTitle } from "../../index";

afterEach(cleanup);

describe("ControlSectionHeader reference layout", () => {
  it("keeps the title, help, reset and separate collapse button in order", () => {
    const toggle = vi.fn();
    const reset = vi.fn();
    const { container } = render(
      <ControlSectionHeader
        action={<Button aria-label="Reset Frame section" onClick={reset} />}
        collapsible
        description="The visible output frame."
        onCollapsedChange={toggle}
      >
        <PanelTitle>Frame</PanelTitle>
      </ControlSectionHeader>,
    );
    expect(screen.getAllByRole("button").map((button) => button.getAttribute("aria-label"))).toEqual([
      "Toggle Frame section", "Frame help", "Reset Frame section", "Collapse Frame section",
    ]);
    const title = screen.getByRole("button", { name: "Toggle Frame section" });
    const collapse = screen.getByRole("button", { name: "Collapse Frame section" });
    expect(title.classList.contains("text-left")).toBe(true);
    expect(collapse.textContent).not.toContain("Frame");
    expect(collapse.getAttribute("data-size")).toBe("icon-sm");
    expect(collapse.getAttribute("data-variant")).toBe("ghost");
    expect(container.querySelector("button button")).toBeNull();
    fireEvent.click(screen.getByRole("button", { name: "Frame help" }));
    fireEvent.click(screen.getByRole("button", { name: "Reset Frame section" }));
    expect(reset).toHaveBeenCalledTimes(1);
    expect(toggle).not.toHaveBeenCalled();
    fireEvent.click(title);
    fireEvent.click(collapse);
    expect(toggle.mock.calls).toEqual([[true], [true]]);
  });

  it("does not add collapse controls to a noncollapsible section", () => {
    render(<ControlSectionHeader><PanelTitle>Frame</PanelTitle></ControlSectionHeader>);
    expect(screen.queryAllByRole("button")).toHaveLength(0);
    expect(screen.getByText("Frame")).toBeTruthy();
  });
});