import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";

import { RadioGroup, RadioGroupItem } from "./radio-group";

describe("RadioGroup", () => {
  it("renders orientation and default value state", () => {
    render(
      <RadioGroup aria-label="Review lane" defaultValue="design" orientation="horizontal">
        <RadioGroupItem aria-label="Editorial" value="editorial" />
        <RadioGroupItem aria-label="Design" value="design" />
      </RadioGroup>
    );

    const group = screen.getByRole("radiogroup", { name: "Review lane" });
    const design = screen.getByRole("radio", { name: "Design" });
    const designIcon = design.querySelector('[data-slot="icon"]');

    expect(group).toHaveAttribute("data-slot", "root");
    expect(group).toHaveAttribute("data-orientation", "horizontal");
    expect(design).toBeChecked();
    expect(design).toHaveAttribute("data-slot", "control");
    expect(design).toHaveAttribute("data-state", "checked");
    expect(designIcon).toHaveAttribute("data-state", "checked");
  });

  it("supports value change callbacks when a new option is selected", async () => {
    const user = userEvent.setup();
    const onValueChange = vi.fn();

    render(
      <RadioGroup aria-label="Priority" defaultValue="low" onValueChange={onValueChange}>
        <RadioGroupItem aria-label="Low" value="low" />
        <RadioGroupItem aria-label="Medium" value="medium" />
        <RadioGroupItem aria-label="High" value="high" />
      </RadioGroup>
    );

    const medium = screen.getByRole("radio", { name: "Medium" });
    const mediumIcon = medium.querySelector('[data-slot="icon"]');

    await user.click(medium);

    expect(medium).toBeChecked();
    expect(mediumIcon).toHaveAttribute("data-state", "checked");
    expect(onValueChange).toHaveBeenLastCalledWith("medium");
  });

  it("exposes disabled and invalid item state", async () => {
    const user = userEvent.setup();

    render(
      <RadioGroup aria-label="Status">
        <RadioGroupItem aria-label="Ready" value="ready" />
        <RadioGroupItem aria-label="Blocked" disabled invalid value="blocked" />
      </RadioGroup>
    );

    const blocked = screen.getByRole("radio", { name: "Blocked" });

    expect(blocked).toBeDisabled();
    expect(blocked).toHaveAttribute("aria-invalid", "true");
    expect(blocked).toHaveAttribute("data-disabled", "");

    await user.click(blocked);
    expect(blocked).not.toBeChecked();
  });
});