import { describe, it, expect } from "vitest";
import { screen } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";
import {
  componentTestSuite,
  type ComponentTestSuiteConfig,
} from "../utils/componentTestSuite";
import { renderWithProviders as render } from "../utils/test-utils";
import Chip from "../../app/components/controls/Chip";

type Props = React.ComponentProps<typeof Chip>;

const config: ComponentTestSuiteConfig<Props> = {
  component: Chip,
  name: "Chip",
  props: {
    label: "Worker cooperative",
    state: "unselected",
    palette: "default",
    size: "m",
  } as Props,
  primaryRole: "button",
  testCases: {
    renders: true,
    accessibility: true,
    keyboardNavigation: true,
    disabledState: true,
  },
  states: {
    disabledProps: { disabled: true, state: "disabled" },
  },
};

describe("Chip", () => {
  componentTestSuite<Props>(config);

  it("exposes aria-pressed false when unselected", () => {
    render(<Chip label="Worker cooperative" state="unselected" />);
    const chip = screen.getByRole("button", { name: "Worker cooperative" });
    expect(chip).toHaveAttribute("aria-pressed", "false");
    expect(chip.querySelector("svg")).toBeNull();
  });

  it("paints unselected chips on the element so native button styles cannot win", () => {
    render(<Chip label="Worker cooperative" state="unselected" />);
    const chip = screen.getByRole("button", { name: "Worker cooperative" });
    expect(chip.style.color).toContain("--color-content-default-brand-primary");
    expect(chip.style.backgroundColor).toBe("transparent");
    expect(chip.style.borderColor).toContain(
      "--color-border-default-tertiary",
    );
  });

  it("exposes aria-pressed and a check mark when selected", () => {
    render(<Chip label="Worker cooperative" state="selected" />);
    const chip = screen.getByRole("button", { name: "Worker cooperative" });
    expect(chip).toHaveAttribute("aria-pressed", "true");
    expect(chip.querySelector("svg[aria-hidden]")).not.toBeNull();
  });
});