import { DEFAULT_THEME, mergeMantineTheme } from "@mantine/core";
import source from "@wealthledger/tokens/tokens.json";
import { describe, expect, it } from "vitest";

import { colorRoles, cssVariablesResolver, theme } from "./theme";

describe("design theme adapter", () => {
	it("preserves scale-aware sizes, unscaled breakpoints and shadow layers", () => {
		expect(theme.spacing?.md).toBe("calc(1rem * var(--mantine-scale))");
		expect(theme.fontSizes?.sm).toBe("calc(0.875rem * var(--mantine-scale))");
		expect(theme.breakpoints?.sm).toBe("48em");
		expect(theme.shadows?.sm).toContain(
			"calc(-0.3125rem * var(--mantine-scale))",
		);
		expect(theme.shadows?.sm).toContain("rgba(0, 0, 0, 0.04)");
	});

	it("keeps default-shade roles attached to native filled variables", () => {
		const resolved = mergeMantineTheme(DEFAULT_THEME, theme);
		const variables = cssVariablesResolver(resolved).variables;
		expect(colorRoles.primary).toBe("blue");
		expect(variables["--wl-color-primary"]).toBe(
			"var(--mantine-color-blue-filled)",
		);
		expect(variables["--wl-color-canvas"]).toBe("var(--mantine-color-gray-2)");
		expect(Object.keys(variables)).toHaveLength(
			Object.keys(source.color.roles).length,
		);
		expect(cssVariablesResolver(resolved).light["--mantine-color-dimmed"]).toBe(
			variables["--wl-color-muted"],
		);
	});
});