import { beforeEach, expect, it, vi } from "vitest";
import { fireEvent, renderWithProviders, screen, waitFor } from "@/test/render";
import { CurrencyField } from "./currency-field";

const { query } = vi.hoisted(() => ({ query: vi.fn() }));
const client = { query };
vi.mock("urql", async (importOriginal) => ({
  ...(await importOriginal<typeof import("urql")>()),
  useClient: () => client,
}));

beforeEach(() => query.mockReset());

it("preserves an existing currency until it is explicitly cleared", async () => {
  const { container } = await renderWithProviders(
    <form>
      <CurrencyField name="currencyId" label="Currency" value={{ id: "jpy", label: "JPY" }} />
    </form>,
  );
  const form = container.querySelector("form")!;
  expect(new FormData(form).get("currencyId")).toBe("jpy");
  fireEvent.click(screen.getByRole("button", { name: "Clear selection" }));
  expect(new FormData(form).get("currencyId")).toBe("");
});

it("searches currencies by code or name and submits their ID", async () => {
  query.mockReturnValue({
    toPromise: () =>
      Promise.resolve({
        data: {
          currencies: {
            pageInfo: { hasNextPage: false, endCursor: null },
            edges: [{ node: { id: "jpy", code: "JPY" } }],
          },
        },
      }),
  });
  const { container } = await renderWithProviders(
    <form>
      <CurrencyField name="currencyId" label="Currency" />
    </form>,
  );
  fireEvent.click(screen.getByRole("button", { name: "Currency" }));
  await screen.findByRole("option", { name: "JPY" });
  fireEvent.change(screen.getByRole("combobox"), { target: { value: " Yen " } });
  await waitFor(() =>
    expect(query).toHaveBeenLastCalledWith(
      expect.anything(),
      {
        after: undefined,
        query: { or: [{ code: { contains: "Yen" } }, { name: { contains: "Yen" } }] },
      },
      expect.anything(),
    ),
  );
  const option = await screen.findByRole("option", { name: "JPY" });
  fireEvent.pointerDown(option, { pointerType: "mouse" });
  fireEvent.click(option);
  expect(new FormData(container.querySelector("form")!).get("currencyId")).toBe("jpy");
});