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

describe("Dialog ARIA", () => {
  it("content has role=dialog", () => {
    render(() => (
      <Dialog defaultOpen>
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
        </Dialog.Content>
      </Dialog>
    ));
    expect(screen.getByRole("dialog")).toBeTruthy();
  });

  it("content has aria-modal when modal prop is true", () => {
    render(() => (
      <Dialog defaultOpen modal>
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
        </Dialog.Content>
      </Dialog>
    ));
    expect(screen.getByRole("dialog").getAttribute("aria-modal")).toBe("true");
  });

  it("content does not have aria-modal when modal is false", () => {
    render(() => (
      <Dialog defaultOpen modal={false}>
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
        </Dialog.Content>
      </Dialog>
    ));
    expect(screen.getByRole("dialog").getAttribute("aria-modal")).toBeNull();
  });

  it("content is linked to title via aria-labelledby", () => {
    render(() => (
      <Dialog defaultOpen>
        <Dialog.Content>
          <Dialog.Title>My Title</Dialog.Title>
        </Dialog.Content>
      </Dialog>
    ));
    const dialog = screen.getByRole("dialog");
    const title = screen.getByText("My Title");
    expect(dialog.getAttribute("aria-labelledby")).toBe(title.id);
  });

  it("content is linked to description via aria-describedby", () => {
    render(() => (
      <Dialog defaultOpen>
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
          <Dialog.Description>My description</Dialog.Description>
        </Dialog.Content>
      </Dialog>
    ));
    const dialog = screen.getByRole("dialog");
    const desc = screen.getByText("My description");
    expect(dialog.getAttribute("aria-describedby")).toBe(desc.id);
  });

  it("trigger has aria-haspopup=dialog", () => {
    render(() => (
      <Dialog>
        <Dialog.Trigger>Open</Dialog.Trigger>
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
        </Dialog.Content>
      </Dialog>
    ));
    expect(screen.getByText("Open").getAttribute("aria-haspopup")).toBe("dialog");
  });

  it("trigger aria-expanded reflects open state", () => {
    render(() => (
      <Dialog>
        <Dialog.Trigger>Open</Dialog.Trigger>
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
        </Dialog.Content>
      </Dialog>
    ));
    const trigger = screen.getByText("Open");
    expect(trigger.getAttribute("aria-expanded")).toBe("false");
  });
});