import "./styles.css";
import {
	type CSSVariablesResolver,
	colorsTuple,
	createTheme,
	getThemeColor,
	type MantinePrimaryShade,
	Modal,
	rem,
	rgba,
} from "@mantine/core";
import designTokens from "@wealthledger/tokens/tokens.json";

const { color, typography, spacing, radius, shadows, breakpoints } =
	designTokens;
const mapValues = <T, U>(values: Record<string, T>, convert: (value: T) => U) =>
	Object.fromEntries(
		Object.entries(values).map(([name, value]) => [name, convert(value)]),
	);

const colorRoles = mapValues(color.roles, (role) =>
	role.shade === null ? role.color : `${role.color}.${role.shade}`,
);

const theme = createTheme({
	respectReducedMotion: true,
	components: {
		Modal: Modal.extend({
			defaultProps: {
				overlayProps: { blur: 3 },
				transitionProps: {
					transition: "fade-down",
					duration: 220,
					exitDuration: 180,
					timingFunction: "ease-out",
				},
			},
		}),
	},
	primaryColor: color.roles.primary.color,
	primaryShade: color.primaryShade as MantinePrimaryShade,
	defaultRadius: radius.default,
	white: color.base.white,
	black: color.base.black,
	colors: mapValues(color.palettes, colorsTuple),
	fontFamily: typography.fontFamily,
	fontFamilyMonospace: typography.fontFamilyMonospace,
	fontSizes: mapValues(typography.fontSizes, (value) => rem(value)),
	fontWeights: mapValues(typography.fontWeights, String),
	lineHeights: mapValues(typography.lineHeights, String),
	headings: {
		fontFamily: typography.fontFamily,
		fontWeight: String(typography.fontWeights.bold),
		sizes: mapValues(typography.headings, (value) => ({
			fontSize: rem(value.fontSize),
			lineHeight: String(value.lineHeight),
		})),
	},
	spacing: mapValues(spacing.values, (value) => rem(value)),
	radius: mapValues(radius.values, (value) => rem(value)),
	shadows: mapValues(shadows.values, (layers) =>
		layers
			.map(
				(layer) =>
					`${rem(layer.offsetX)} ${rem(layer.offsetY)} ${rem(layer.blur)} ${rem(layer.spread)} ${rgba(color.base[layer.color as keyof typeof color.base], layer.opacity)}`,
			)
			.join(", "),
	),
	breakpoints: mapValues(
		breakpoints.values,
		(value) => `${value}${breakpoints.unit}`,
	),
});

const cssVariablesResolver: CSSVariablesResolver = (resolvedTheme) => ({
	variables: Object.fromEntries(
		Object.entries(colorRoles).map(([role, reference]) => [
			`--wl-color-${role}`,
			getThemeColor(reference, resolvedTheme),
		]),
	),
	light: {
		"--mantine-color-dimmed": getThemeColor(colorRoles.muted, resolvedTheme),
	},
	dark: {},
});

export { colorRoles, cssVariablesResolver, designTokens, theme };