import { beforeEach, expect, it, vi } from "vitest";
import { fireEvent, renderWithProviders, screen, waitFor } from "@/test/render";
import { CompanyField } from "./company-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("searches active companies and stores the selected ID in form data", async () => {
  query.mockReturnValue({
    toPromise: () =>
      Promise.resolve({
        data: {
          companies: {
            pageInfo: { hasNextPage: false, endCursor: null },
            edges: [{ node: { id: "company-jp", legalName: "Japan company" } }],
          },
        },
      }),
  });
  const { container } = await renderWithProviders(
    <form>
      <CompanyField />
    </form>,
  );
  fireEvent.click(screen.getByRole("button", { name: "Our legal entity" }));
  await screen.findByRole("option", { name: "Japan company" });
  fireEvent.change(screen.getByRole("combobox"), { target: { value: " Japan " } });
  await waitFor(() =>
    expect(query).toHaveBeenLastCalledWith(
      expect.anything(),
      { after: undefined, query: { status: { eq: "ACTIVE" }, legalName: { contains: "Japan" } } },
      expect.anything(),
    ),
  );
  const option = await screen.findByRole("option", { name: "Japan company" });
  fireEvent.pointerDown(option, { pointerType: "mouse" });
  fireEvent.click(option);
  expect(new FormData(container.querySelector("form")!).get("companyId")).toBe("company-jp");
});