import { createElement } from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { PreferencesForm } from "@/components/frontend/account/PreferencesForm";
import { updatePreferences } from "@/app/(frontend)/account/actions";

vi.mock("next/navigation", () => ({
  useRouter: () => ({ refresh: vi.fn() }),
}));

vi.mock("@/app/(frontend)/account/actions", () => ({
  updatePreferences: vi.fn(),
}));

class ResizeObserverMock implements ResizeObserver {
  observe(_target: Element, _options?: ResizeObserverOptions): void {}

  unobserve(_target: Element): void {}

  disconnect(): void {}
}

globalThis.ResizeObserver = ResizeObserverMock;

const mockedUpdatePreferences = vi.mocked(updatePreferences);

describe("PreferencesForm", () => {
  beforeEach(() => {
    mockedUpdatePreferences.mockReset();
    mockedUpdatePreferences.mockResolvedValue({ success: true });
  });

  it("submits all display, in-app, and Discord preferences", async () => {
    render(
      createElement(PreferencesForm, {
        mutedAll: false,
        mutedTypes: ["market:offer"],
        showCallsign: false,
        showVersionOverlay: true,
        leadOrActual: "lead",
        discordEnabled: false,
        discordMutedTypes: [],
        xpDisplayMini: false,
      }),
    );

    fireEvent.click(screen.getByRole("switch", { name: "Show callsign instead of display name" }));
    fireEvent.click(screen.getByRole("switch", { name: "Use mini mode for XP display" }));
    fireEvent.click(screen.getByRole("switch", { name: "Mute all in-app notifications" }));
    fireEvent.click(screen.getByRole("radio", { name: "Actual" }));
    fireEvent.click(screen.getByRole("switch", { name: "Enable Discord notifications" }));
    const discordMarketOffer = document.getElementById("discord-market-offer");
    if (!(discordMarketOffer instanceof HTMLElement)) {
      throw new Error("Discord market-offer switch was not rendered.");
    }
    fireEvent.click(discordMarketOffer);
    fireEvent.click(screen.getByRole("button", { name: "Save preferences" }));

    await waitFor(() => {
      expect(mockedUpdatePreferences).toHaveBeenCalledWith({
        mutedAll: true,
        mutedTypes: ["market:offer"],
        showCallsign: true,
        showVersionOverlay: true,
        leadOrActual: "actual",
        discordEnabled: true,
        discordMutedTypes: ["market:offer"],
        xpDisplayMini: true,
      });
    });
  });
});