import { fireEvent, render, screen } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";
import { Collapsible } from "../../../src/components/collapsible/index";

describe("Collapsible", () => {
  it("content is hidden by default", () => {
    render(() => (
      <Collapsible>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content data-testid="content">Hidden</Collapsible.Content>
      </Collapsible>
    ));
    expect(screen.getByTestId("content")).toHaveAttribute("hidden");
  });

  it("content is shown when defaultOpen=true", () => {
    render(() => (
      <Collapsible defaultOpen>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content data-testid="content">Visible</Collapsible.Content>
      </Collapsible>
    ));
    expect(screen.getByTestId("content")).not.toHaveAttribute("hidden");
  });

  it("trigger click opens content", () => {
    render(() => (
      <Collapsible>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
      </Collapsible>
    ));
    fireEvent.click(screen.getByRole("button"));
    expect(screen.getByTestId("content")).not.toHaveAttribute("hidden");
  });

  it("trigger click closes open content", () => {
    render(() => (
      <Collapsible defaultOpen>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
      </Collapsible>
    ));
    fireEvent.click(screen.getByRole("button"));
    expect(screen.getByTestId("content")).toHaveAttribute("hidden");
  });

  it("trigger has aria-expanded reflecting open state", () => {
    render(() => (
      <Collapsible>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content>Content</Collapsible.Content>
      </Collapsible>
    ));
    expect(screen.getByRole("button").getAttribute("aria-expanded")).toBe("false");
    fireEvent.click(screen.getByRole("button"));
    expect(screen.getByRole("button").getAttribute("aria-expanded")).toBe("true");
  });

  it("trigger aria-controls matches content id", () => {
    render(() => (
      <Collapsible>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
      </Collapsible>
    ));
    const trigger = screen.getByRole("button");
    const content = screen.getByTestId("content");
    expect(trigger.getAttribute("aria-controls")).toBe(content.id);
  });

  it("disabled trigger does not toggle", () => {
    render(() => (
      <Collapsible disabled>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
      </Collapsible>
    ));
    fireEvent.click(screen.getByRole("button"));
    expect(screen.getByTestId("content")).toHaveAttribute("hidden");
  });

  it("controlled open state", () => {
    render(() => (
      <Collapsible open={true} onOpenChange={() => {}}>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content data-testid="content">Content</Collapsible.Content>
      </Collapsible>
    ));
    expect(screen.getByTestId("content")).not.toHaveAttribute("hidden");
  });
});