import * as stylex from "@stylexjs/stylex";

import { color } from "./tokens.stylex";

export const controlColor = stylex.defineVars({
	logoColor: color.orange200,
	backgroundColor: color.gray700,

	mainColor: color.white000,
	textMuted: color.gray100,

	thumbnailBackground: color.gray600,

	inputBackground: color.gray600,
	inputHoverBackground: color.gray400,
	inputBorder: color.gray200,
	inputColor: color.gray000,
	inputPlaceholderColor: color.gray100,

	inputActiveBackground: color.gray500,
	inputActiveBorder: color.gray100,
	inputActiveColor: color.gray000,

	inputInvalidBorder: color.red150,

	numericBadgeBackground: color.orange150,

	inputDisabledBackground: color.gray400,
	inputDisabledBorder: color.gray100,
	inputDisabledColor: color.gray100,

	toggleCheckedBackground: color.orange400,
	toggleCheckedPillBackground: color.orange150,
	toggleCheckedDisabledBackground: color.orange400,
	toggleCheckedDisabledPillBackground: color.orange300,

	progressErrorBackground: color.apricot200,
	progressMarqueeBackground: color.orange150,

	buttonPrimaryBackground: color.orange200,
	buttonPrimaryColor: color.white000,
	buttonPrimaryHoverBackground: color.gray000,
	buttonPrimaryHoverColor: color.gray900,
	buttonPrimaryActiveBackground: color.gray100,
	buttonPrimaryActiveColor: color.gray800,
	buttonPrimaryDisabledBackground: color.gray400,
	buttonPrimaryDisabledColor: color.gray100,

	buttonTertiaryBackground: color.transparent,
	buttonTertiaryColor: color.orange150,
	buttonTertiaryHoverBackground: color.transparent,
	buttonTertiaryHoverColor: color.gray000,
	buttonTertiaryActiveBackground: color.transparent, // TODO
	buttonTertiaryActiveColor: color.orange150, // TODO
	buttonTertiaryDisabledBackground: color.transparent,
	buttonTertiaryDisabledColor: color.gray100,

	checkboxCheckedBackground: color.orange200,
	checkboxDisabledCheckedBackground: color.orange300,

	linkColor: color.sky100,
	linkHoverColor: color.white000,
	linkActiveColor: color.white000, // TODO: --t-link-active-color

	subscriptionColor: color.mustard150,

	sliderTrackBackground: color.gray400,
	sliderTrackDisabledBackground: color.gray400,
	sliderPassedTrackBackground: color.orange150,
	sliderThumbBackground: color.orange150,
	sliderThumbHoverBackground: color.orange100,
	sliderThumbDisabledBackground: color.gray200,
	sliderDisabledPassedTrackBackground: color.gray200,

	volumeTrackBackground: color.gray400,
	volumePassedTrackBackground: color.sky100,
	volumeThumbBackground: color.gray000,
});

export const orangeTheme = stylex.createTheme(controlColor, {
	logoColor: color.orange200,

	numericBadgeBackground: color.orange150,

	buttonPrimaryBackground: color.orange200,
	buttonTertiaryColor: color.orange150,

	sliderPassedTrackBackground: color.orange150,
	sliderThumbBackground: color.orange150,
	sliderThumbHoverBackground: color.orange100,

	toggleCheckedBackground: color.orange400,
	toggleCheckedPillBackground: color.orange150,
	toggleCheckedDisabledBackground: color.orange400,
	toggleCheckedDisabledPillBackground: color.orange300,

	progressMarqueeBackground: color.orange150,

	checkboxCheckedBackground: color.orange200,
	checkboxDisabledCheckedBackground: color.orange300,

	linkColor: color.sky100,

	volumePassedTrackBackground: color.sky100,
});

export const greenTheme = stylex.createTheme(controlColor, {
	logoColor: color.mint300,

	numericBadgeBackground: color.mint200,

	buttonPrimaryBackground: color.mint300,
	buttonTertiaryColor: color.mint200,

	sliderPassedTrackBackground: color.mint200,
	sliderThumbBackground: color.mint200,
	sliderThumbHoverBackground: color.mint150,

	toggleCheckedBackground: color.mint500,
	toggleCheckedPillBackground: color.mint200,
	toggleCheckedDisabledBackground: color.mint500,
	toggleCheckedDisabledPillBackground: color.mint400,

	progressMarqueeBackground: color.mint200,

	checkboxCheckedBackground: color.mint300,
	checkboxDisabledCheckedBackground: color.mint400,

	linkColor: color.blush100,

	volumePassedTrackBackground: color.blush100,
});

export const blueTheme = stylex.createTheme(controlColor, {
	logoColor: color.blue200,

	numericBadgeBackground: color.blue150,

	buttonPrimaryBackground: color.blue150,
	buttonTertiaryColor: color.blue150,

	sliderPassedTrackBackground: color.blue150,
	sliderThumbBackground: color.blue150,
	sliderThumbHoverBackground: color.blue100,

	toggleCheckedBackground: color.blue400,
	toggleCheckedPillBackground: color.blue150,
	toggleCheckedDisabledBackground: color.blue400,
	toggleCheckedDisabledPillBackground: color.blue300,

	progressMarqueeBackground: color.blue150,

	checkboxCheckedBackground: color.blue200,
	checkboxDisabledCheckedBackground: color.blue300,

	linkColor: color.apricot150,

	volumePassedTrackBackground: color.apricot150,
});

export const pinkTheme = stylex.createTheme(controlColor, {
	logoColor: color.pink200,

	numericBadgeBackground: color.pink150,

	buttonPrimaryBackground: color.pink200,
	buttonTertiaryColor: color.pink150,

	sliderPassedTrackBackground: color.pink150,
	sliderThumbBackground: color.pink150,
	sliderThumbHoverBackground: color.pink100,

	toggleCheckedBackground: color.pink500,
	toggleCheckedPillBackground: color.pink150,
	toggleCheckedDisabledBackground: color.pink500,
	toggleCheckedDisabledPillBackground: color.pink300,

	progressMarqueeBackground: color.pink150,

	checkboxCheckedBackground: color.pink200,
	checkboxDisabledCheckedBackground: color.pink300,

	linkColor: color.spring100,

	volumePassedTrackBackground: color.spring100,
});

export const oledTheme = stylex.createTheme(controlColor, {
	backgroundColor: "#000",
});

export const themeMap = {
	0: orangeTheme,
	1: greenTheme,
	3: blueTheme,
	4: pinkTheme,
	5: oledTheme,
} as Record<string, ReturnType<typeof stylex.createTheme>>;