import "@mantine/core/styles.css";
import "@wealthledger/ui/styles.css";

import "@/shared/i18n";
import { MantineProvider } from "@mantine/core";
// eslint-disable-next-line testing-library/no-manual-cleanup -- Vitest globals are disabled, so RTL cannot register its automatic afterEach cleanup.
import { cleanup, render, screen } from "@testing-library/react";
import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
import { afterEach, expect, it } from "vitest";

import type { AccountPagePosition, AccountPagePositionSection } from "../../model/positions";

import { PositionSection } from "./components/PositionSection.view";

afterEach(cleanup);

it("keeps expanded positions vertical while other positions adapt to the viewport", () => {
	const kinds: AccountPagePositionSection["kind"][] = [
		"stocks",
		"bonds",
		"other",
	];

	const width = window.innerWidth;
	expect([375, 1280]).toContain(width);

	for (const kind of kinds) {
		const otherType = kind === "bonds" ? "BOND" : "FUND";

		const positions: AccountPagePosition[] = [1, 2, 3].map(

			index =>
				({
					absoluteReturn: null,
					averagePurchasePrice: null,
					currentValue: { currency: "RUB", value: "1000" },
					displayName: `Инструмент ${index}`,
					figi: null,
					isin: null,
					logoName: null,
					logoSrc: null,
					quantity: "10",
					returnText: null,
					shareText: null,
					ticker: null,
					type: kind === "stocks" ? "STOCK" : otherType,
				}),
		);

		const { unmount } = render(
			<MantineProvider
				cssVariablesResolver={cssVariablesResolver}
				forceColorScheme="light"
				theme={theme}
			>
				<PositionSection
					section={{
						groups: positions.map(position => ({
							key: position.displayName,
							positions: [position],
						})),
						kind,
					}}
				/>
			</MantineProvider>,
		);

		const bounds = positions.map(position =>
			screen.getByText(position.displayName).getBoundingClientRect(),
		);

		const context = `${kind} at ${width}px`;

		for (const [index, current] of bounds.entries()) {
			expect(current.width, context).toBeGreaterThan(0);
			expect(current.height, context).toBeGreaterThan(0);
			if (index === 0) continue;
			const previous = bounds[index - 1];

			if (kind === "other" && width === 1280) {
				// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
				expect(current.top, context).toBeCloseTo(previous.top, 0);
				// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
				expect(current.left, context).toBeGreaterThan(previous.right);
			}
			else {
				// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
				expect(current.left, context).toBeCloseTo(previous.left, 0);
				// eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch.
				expect(current.top, context).toBeGreaterThan(previous.bottom);
			}
		}

		unmount();
	}
});