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

describe("ToggleGroup single", () => {
  it("no item pressed by default", () => {
    render(() => (
      <ToggleGroup type="single">
        <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      </ToggleGroup>
    ));
    expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe("false");
  });

  it("pressing an item selects it", () => {
    render(() => (
      <ToggleGroup type="single">
        <ToggleGroup.Item value="a">A</ToggleGroup.Item>
        <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      </ToggleGroup>
    ));
    fireEvent.click(screen.getAllByRole("button")[0]);
    expect(screen.getAllByRole("button")[0].getAttribute("aria-pressed")).toBe("true");
    expect(screen.getAllByRole("button")[1].getAttribute("aria-pressed")).toBe("false");
  });

  it("pressing another item in single mode deselects first", () => {
    render(() => (
      <ToggleGroup type="single" defaultValue="a">
        <ToggleGroup.Item value="a">A</ToggleGroup.Item>
        <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      </ToggleGroup>
    ));
    fireEvent.click(screen.getAllByRole("button")[1]);
    expect(screen.getAllByRole("button")[0].getAttribute("aria-pressed")).toBe("false");
    expect(screen.getAllByRole("button")[1].getAttribute("aria-pressed")).toBe("true");
  });

  it("data-state reflects pressed state", () => {
    render(() => (
      <ToggleGroup type="single">
        <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      </ToggleGroup>
    ));
    expect(screen.getByRole("button").getAttribute("data-state")).toBe("off");
    fireEvent.click(screen.getByRole("button"));
    expect(screen.getByRole("button").getAttribute("data-state")).toBe("on");
  });
});

describe("ToggleGroup multiple", () => {
  it("pressing items toggles them independently", () => {
    render(() => (
      <ToggleGroup type="multiple">
        <ToggleGroup.Item value="a">A</ToggleGroup.Item>
        <ToggleGroup.Item value="b">B</ToggleGroup.Item>
      </ToggleGroup>
    ));
    fireEvent.click(screen.getAllByRole("button")[0]);
    fireEvent.click(screen.getAllByRole("button")[1]);
    expect(screen.getAllByRole("button")[0].getAttribute("aria-pressed")).toBe("true");
    expect(screen.getAllByRole("button")[1].getAttribute("aria-pressed")).toBe("true");
  });

  it("pressing a pressed item in multiple mode unpresses it", () => {
    render(() => (
      <ToggleGroup type="multiple" defaultValue={["a"]}>
        <ToggleGroup.Item value="a">A</ToggleGroup.Item>
      </ToggleGroup>
    ));
    fireEvent.click(screen.getByRole("button"));
    expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe("false");
  });
});