// @vitest-environment jsdom
import "@testing-library/jest-dom/vitest";

import { cleanup, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
import { polyfillDialog } from "../../__tests__/polyfill-dialog.js";
import { ImportMethodDialog } from "../import-method-dialog.js";

beforeAll(() => {
	polyfillDialog();
});

afterEach(cleanup);

function renderDialog(open = true) {
	const onSelectFile = vi.fn();
	const onSubmitClipboard = vi.fn();
	const onClose = vi.fn();
	const result = render(
		<ImportMethodDialog
			open={open}
			onSelectFile={onSelectFile}
			onSubmitClipboard={onSubmitClipboard}
			onClose={onClose}
		/>,
	);
	return { ...result, onSelectFile, onSubmitClipboard, onClose };
}

describe("ImportMethodDialog", () => {
	it("opens in pick mode with two method buttons", () => {
		renderDialog();
		expect(screen.getByText("From file")).toBeInTheDocument();
		expect(screen.getByText("Paste content")).toBeInTheDocument();
	});

	it("From file button calls onSelectFile and closes", async () => {
		const user = userEvent.setup();
		const { onSelectFile, onClose } = renderDialog();

		await user.click(screen.getByText("From file"));
		expect(onSelectFile).toHaveBeenCalled();
		expect(onClose).toHaveBeenCalled();
	});

	it("Paste content button switches to paste mode", async () => {
		const user = userEvent.setup();
		renderDialog();

		await user.click(screen.getByText("Paste content"));
		expect(
			screen.getByPlaceholderText("Paste exported JSON here..."),
		).toBeInTheDocument();
		expect(screen.getByRole("button", { name: "Import" })).toBeDisabled();
	});

	it("typing text enables Import button", async () => {
		const user = userEvent.setup();
		renderDialog();

		await user.click(screen.getByText("Paste content"));
		const textarea = screen.getByPlaceholderText("Paste exported JSON here...");
		await user.type(textarea, "test-data");
		expect(screen.getByRole("button", { name: "Import" })).not.toBeDisabled();
	});

	it("Import calls onSubmitClipboard with text and closes", async () => {
		const user = userEvent.setup();
		const { onSubmitClipboard, onClose } = renderDialog();

		await user.click(screen.getByText("Paste content"));
		await user.type(
			screen.getByPlaceholderText("Paste exported JSON here..."),
			"some-json-content",
		);
		await user.click(screen.getByRole("button", { name: "Import" }));
		expect(onSubmitClipboard).toHaveBeenCalledWith("some-json-content");
		expect(onClose).toHaveBeenCalled();
	});

	it("Back button returns to pick mode and clears text", async () => {
		const user = userEvent.setup();
		renderDialog();

		await user.click(screen.getByText("Paste content"));
		await user.type(
			screen.getByPlaceholderText("Paste exported JSON here..."),
			"some text",
		);
		await user.click(screen.getByRole("button", { name: "Back" }));

		expect(screen.getByText("From file")).toBeInTheDocument();
		expect(
			screen.queryByPlaceholderText("Paste exported JSON here..."),
		).not.toBeInTheDocument();
	});
});