import {
	act,
	fireEvent,
	render,
	screen,
	waitFor,
} from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import {
	DEFAULT_FILE_TREE_WIDTH,
	resetWorkspace,
	setFileTreeWidth,
	toggleWorkspace,
	useWorkspace,
} from "../workspace";
import { Workspace } from "./Workspace";

vi.mock("../api", () => ({
	listFiles: vi.fn().mockResolvedValue({ path: "/w", entries: [] }),
	readFile: vi.fn().mockResolvedValue({ path: "/w/x", content: "" }),
	writeFile: vi.fn().mockResolvedValue(undefined),
	rawFileUrl: (path: string) => `/api/raw?path=${encodeURIComponent(path)}`,
}));

// The real terminal drags xterm and a WebSocket along; a stub is enough here.
vi.mock("./TerminalPane", () => ({
	TerminalPane: () => <div data-testid="terminal-pane" />,
}));

/** Waits for the (mocked) file listing to settle so React stays quiet. */
function treeLoaded() {
	return waitFor(() => expect(screen.queryByText("loading…")).toBeNull());
}

describe("Workspace", () => {
	beforeEach(() => {
		localStorage.clear();
		resetWorkspace();
		toggleWorkspace();
	});

	it("applies the file tree width as a CSS custom property", async () => {
		render(<Workspace />);
		await treeLoaded();
		const panel = screen.getByRole("complementary", { name: "workspace" });
		expect(panel.style.getPropertyValue("--filetree-width")).toBe(
			`${DEFAULT_FILE_TREE_WIDTH}px`,
		);

		act(() => setFileTreeWidth(360));
		expect(panel.style.getPropertyValue("--filetree-width")).toBe("360px");
	});

	it("resizes the file tree from the handle and restores it on double-click", async () => {
		render(<Workspace />);
		await treeLoaded();
		const handle = screen.getByRole("separator", {
			name: "Resize the file tree",
		});

		fireEvent.keyDown(handle, { key: "End" });
		expect(useWorkspace.getState().fileTreeWidth).toBe(800);

		fireEvent.doubleClick(handle);
		expect(useWorkspace.getState().fileTreeWidth).toBe(DEFAULT_FILE_TREE_WIDTH);
	});
});