// @vitest-environment happy-dom

import { act, useState } from "react";
import { createRoot } from "react-dom/client";
import { expect, it, vi } from "vitest";

import { ArtifactSelect } from "./catalog-select";

const items = ["Gladiator", "Wanderer", "Emblem"].map((name) => ({
  key: name.toLowerCase(), name, imageUrl: "/artifact.png", rarity: 5,
}));

function Picker() {
  const [values, setValues] = useState<string[]>([]);
  return <ArtifactSelect multiple presentation="dropdown" items={items} values={values}
    onValuesChange={setValues} label="Artifact sets" placeholder="Search artifacts" />;
}

it("selects at most two artifact sets and allows removing and clearing them", async () => {
  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
  const container = document.createElement("div");
  document.body.append(container);
  const root = createRoot(container);
  const option = (name: string) => Array.from(document.querySelectorAll<HTMLElement>("[role=option]"))
    .find((element) => element.textContent?.includes(name))!;
  const click = async (element: HTMLElement) => {
    await act(async () => { element.click(); });
  };
  try {
    await act(async () => { root.render(<Picker />); });
    const trigger = container.querySelector<HTMLButtonElement>("[data-slot=combobox-trigger]")!;
    await click(trigger);
    const input = document.querySelector<HTMLInputElement>('input[placeholder="Search artifacts"]')!;
    const search = async (value: string) => {
      await act(async () => {
        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(input, value);
        input.dispatchEvent(new Event("input", { bubbles: true }));
      });
    };
    await search("gladiatr");
    expect(document.querySelectorAll("[role=option]")).toHaveLength(1);
    expect(option("Gladiator")).toBeDefined();
    await act(async () => {
      input.focus();
      input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
    });
    await act(async () => {
      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
    });
    expect(trigger.textContent).toContain("Gladiator");
    await search("");
    await click(option("Wanderer"));
    expect(trigger.textContent).toContain("Gladiator + Wanderer");
    expect(option("Emblem").getAttribute("aria-disabled")).toBe("true");
    await click(option("Gladiator"));
    expect(trigger.textContent).toContain("Wanderer");
    expect(trigger.textContent).not.toContain("Gladiator");
    expect(option("Emblem").getAttribute("aria-disabled")).not.toBe("true");
    await click(trigger);
    await click(trigger);
    expect(trigger.textContent).toContain("Wanderer");
    await click(document.querySelector<HTMLElement>("[data-slot=combobox-clear]")!);
    expect(trigger.textContent).toContain("Artifact sets");
  } finally {
    await act(async () => { root.unmount(); });
    container.remove();
    vi.unstubAllGlobals();
  }
});