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

import { Field, FieldControl, FieldDescription, FieldError } from "./field";
import { Input } from "./input";
import { Label } from "./label";

describe("Input", () => {
  it("renders the input slot and reflects explicit state props", () => {
    render(
      <Input
        aria-label="Project slug"
        disabled
        invalid
        readOnly
        required
        size="lg"
      />
    );

    const input = screen.getByRole("textbox", { name: "Project slug" });

    expect(input).toHaveAttribute("data-slot", "input");
    expect(input).toHaveAttribute("data-disabled", "");
    expect(input).toHaveAttribute("data-invalid", "");
    expect(input).toHaveAttribute("data-readonly", "");
    expect(input).toHaveAttribute("data-required", "");
    expect(input).toHaveAttribute("data-size", "lg");
    expect(input).toBeDisabled();
    expect(input).toHaveAttribute("aria-invalid", "true");
    expect(input).toHaveAttribute("readonly");
    expect(input).toBeRequired();
  });

  it("inherits ids and described-by wiring from the surrounding field", () => {
    render(
      <Field invalid required>
        <Label requiredIndicator>Slug</Label>
        <FieldControl>
          <Input />
          <FieldDescription>Use lowercase letters and hyphens.</FieldDescription>
          <FieldError>Slug is required.</FieldError>
        </FieldControl>
      </Field>
    );

    const input = screen.getByRole("textbox", { name: "Slug" });
    const description = screen.getByText("Use lowercase letters and hyphens.");
    const error = screen.getByText("Slug is required.");

    expect(input).toHaveAttribute("aria-describedby", `${description.id} ${error.id}`);
    expect(input).toHaveAttribute("aria-invalid", "true");
    expect(input).toBeRequired();
  });
});