// @vitest-environment jsdom

import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
import * as React from "react";
import { afterEach, describe, expect, it, vi } from "vitest";

import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "./combobox";

afterEach(cleanup);

function ControlledCombobox() {
  const [value, setValue] = React.useState<string | null>(null);

  return (
    <>
      <output data-testid="value">{value ?? "none"}</output>
      <Combobox
        autoHighlight
        items={["Alpha", "Beta"]}
        onValueChange={setValue}
        value={value}
      >
        <ComboboxInput aria-label="Framework" />
        <ComboboxContent>
          <ComboboxList>
            {(item: string) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </>
  );
}

describe("ComboboxList interaction host", () => {
  it("preserves Base UI list semantics and keyboard selection", async () => {
    const { getByRole, getByTestId } = render(<ControlledCombobox />);
    const input = getByRole("combobox");
    fireEvent.click(getByRole("button"));
    const list = await waitFor(() => getByRole("listbox"));

    expect(list.getAttribute("role")).toBe("listbox");
    expect(list.getAttribute("tabindex")).toBe("-1");

    input.focus();
    fireEvent.keyDown(input, { key: "ArrowDown" });
    fireEvent.keyDown(input, { key: "Enter" });

    await waitFor(() => expect(getByTestId("value").textContent).toBe("Alpha"));
  });

  it("strips untrusted public events before Base UI creates trusted list props", async () => {
    const onChange = vi.fn();
    const onInput = vi.fn();
    const onPaste = vi.fn();
    const untrusted: React.ComponentProps<"div"> = {
      onChange,
      onInput,
      onPaste,
    };
    const { getByRole } = render(
      <Combobox defaultValue={null} items={["Alpha"]}>
        <ComboboxInput aria-label="Framework" />
        <ComboboxContent>
          <ComboboxList {...untrusted}>
            <ComboboxItem value="Alpha">Alpha</ComboboxItem>
          </ComboboxList>
        </ComboboxContent>
      </Combobox>,
    );
    fireEvent.click(getByRole("button"));
    const list = await waitFor(() => getByRole("listbox"));

    fireEvent.change(list);
    fireEvent.input(list);
    fireEvent.paste(list);

    expect(onChange).not.toHaveBeenCalled();
    expect(onInput).not.toHaveBeenCalled();
    expect(onPaste).not.toHaveBeenCalled();
    expect(list.getAttribute("role")).toBe("listbox");
    expect(list.getAttribute("tabindex")).toBe("-1");
  });
});