import { semanticTokens } from "./design-tokens/semantic";

type TokenValue = {
	value: string;
};

const getTokenValue = ({ value }: TokenValue) => value;

export type ThemeMode = "light" | "dark";

export interface ThemeTypography {
	fontFamily: string;
	fontWeights: {
		light: number;
		regular: number;
		medium: number;
		semibold: number;
		bold: number;
	};
}

export interface ThemeButtonTypography {
	fontSize: string;
	fontWeight: number;
	small: {
		fontSize: string;
	};
	large: {
		fontSize: string;
	};
}

export interface ThemeButtonIconOnly {
	width: string;
	height: string;
	iconSize: string;
	iconPadding: string;
}

export interface ThemeButtonMetrics {
	borderRadius: string;
	padding: string;
	display: string;
	justifyContent: string;
	alignItems: string;
	gap: string;
	typography: ThemeButtonTypography;
	iconOnly: ThemeButtonIconOnly;
}

export interface ThemeSemanticText {
	primary: string;
	secondary: string;
	inverse: string;
}

export interface ThemeSemanticSurface {
	background: string;
	card: string;
	section: string;
	sidebarBorder: string;
}

export interface ThemeSemanticButtonState {
	background: string;
	backgroundHover?: string;
	border?: string;
	text: string;
	backgroundMuted?: string;
}

export interface ThemeSemanticButton {
	primary: Required<
		Pick<
			ThemeSemanticButtonState,
			"background" | "backgroundHover" | "border" | "text"
		>
	>;
	secondary: Required<
		Pick<
			ThemeSemanticButtonState,
			"background" | "backgroundMuted" | "border" | "text"
		>
	>;
	tertiary: Pick<ThemeSemanticButtonState, "background" | "text">;
	disabled: Required<
		Pick<ThemeSemanticButtonState, "background" | "border" | "text">
	>;
	iconBorder: string;
}

export interface ThemeSemanticFeedback {
	success: string;
	info: string;
	warning: string;
	help: string;
	danger: string;
	secondary: string;
}

export interface ThemeSemantic {
	text: ThemeSemanticText;
	surface: ThemeSemanticSurface;
	button: ThemeSemanticButton;
	feedback: ThemeSemanticFeedback;
}

export interface Theme {
	mode: ThemeMode;
	typography: ThemeTypography;
	button: ThemeButtonMetrics;
	semantic: ThemeSemantic;
}

const typography: ThemeTypography = {
	fontFamily: "'Montserrat', sans-serif",
	fontWeights: {
		light: 300,
		regular: 400,
		medium: 500,
		semibold: 600,
		bold: 700,
	},
};

const createButtonMetrics = (): ThemeButtonMetrics => ({
	borderRadius: "6px",
	padding: "20px 32px",
	display: "inline-flex",
	justifyContent: "center",
	alignItems: "center",
	gap: "10px",
	typography: {
		fontSize: "16px",
		fontWeight: 500,
		small: {
			fontSize: "14px",
		},
		large: {
			fontSize: "18px",
		},
	},
	iconOnly: {
		width: "24px",
		height: "24px",
		iconSize: "24px",
		iconPadding: "3px 4px",
	},
});

const feedbackTokens = semanticTokens.semantic.common.feedback;
const commonButtonTokens = semanticTokens.semantic.common.button;

const createTheme = (mode: ThemeMode): Theme => {
	const semanticMode = semanticTokens.semantic[mode];

	return {
		mode,
		typography: { ...typography },
		button: createButtonMetrics(),
		semantic: {
			text: {
				primary: getTokenValue(semanticMode.text.primary),
				secondary: getTokenValue(semanticMode.text.secondary),
				inverse: getTokenValue(semanticMode.text.inverse),
			},
			surface: {
				background: getTokenValue(semanticMode.surface.background),
				card: getTokenValue(semanticMode.surface.card),
				section: getTokenValue(semanticMode.surface.section),
				sidebarBorder: getTokenValue(semanticMode.surface.sidebarBorder),
			},
			button: {
				primary: {
					background: getTokenValue(semanticMode.button.primary.background),
					backgroundHover: getTokenValue(
						semanticMode.button.primary.backgroundHover
					),
					border: getTokenValue(semanticMode.button.primary.border),
					text: getTokenValue(semanticMode.button.primary.text),
				},
				secondary: {
					background: getTokenValue(semanticMode.button.secondary.background),
					backgroundMuted: getTokenValue(
						semanticMode.button.secondary.backgroundMuted
					),
					border: getTokenValue(semanticMode.button.secondary.border),
					text: getTokenValue(semanticMode.button.secondary.text),
				},
				tertiary: {
					background: getTokenValue(semanticMode.button.tertiary.background),
					text: getTokenValue(semanticMode.button.tertiary.text),
				},
				disabled: {
					background: getTokenValue(commonButtonTokens.disabled.background),
					border: getTokenValue(commonButtonTokens.disabled.border),
					text: getTokenValue(commonButtonTokens.disabled.text),
				},
				iconBorder: getTokenValue(commonButtonTokens.iconBorder),
			},
			feedback: {
				success: getTokenValue(feedbackTokens.success),
				info: getTokenValue(feedbackTokens.info),
				warning: getTokenValue(feedbackTokens.warning),
				help: getTokenValue(feedbackTokens.help),
				danger: getTokenValue(feedbackTokens.danger),
				secondary: getTokenValue(feedbackTokens.secondary),
			},
		},
	};
};

export const lightTheme: Theme = createTheme("light");
export const darkTheme: Theme = createTheme("dark");