import { Expand } from '@tldraw/utils'
import { T } from '@tldraw/validate'
import { StyleProp } from './StyleProp'

/** @public */
export const defaultColorNames = [
	'black',
	'grey',
	'light-violet',
	'violet',
	'blue',
	'light-blue',
	'yellow',
	'orange',
	'green',
	'light-green',
	'light-red',
	'red',
	'white',
] as const

/** @public */
export interface TLDefaultColorThemeColor {
	solid: string
	semi: string
	pattern: string
	fill: string // same as solid
	frame: {
		headingStroke: string
		headingFill: string
		stroke: string
		fill: string
		text: string
	}
	note: {
		fill: string
		text: string
	}
	highlight: {
		srgb: string
		p3: string
	}
}

/** @public */
export type TLDefaultColorTheme = Expand<
	{
		id: 'light' | 'dark'
		text: string
		background: string
		solid: string
	} & Record<(typeof defaultColorNames)[number], TLDefaultColorThemeColor>
>

/** @public */
export const DefaultColorThemePalette: {
	lightMode: TLDefaultColorTheme
	darkMode: TLDefaultColorTheme
} = {
	lightMode: {
		id: 'light',
		text: '#000000',
		background: '#f9fafb',
		solid: '#fcfffe',
		black: {
			solid: '#1d1d1d',
			fill: '#1d1d1d',
			frame: {
				headingStroke: '#717171',
				headingFill: '#ffffff',
				stroke: '#717171',
				fill: '#ffffff',
				text: '#000000',
			},
			note: {
				fill: '#FCE19C',
				text: '#000000',
			},
			semi: '#e8e8e8',
			pattern: '#494949',
			highlight: {
				srgb: '#fddd00',
				p3: 'color(display-p3 0.972 0.8205 0.05)',
			},
		},
		blue: {
			solid: '#4465e9',
			fill: '#4465e9',
			frame: {
				headingStroke: '#6681ec',
				headingFill: '#f9fafe',
				stroke: '#6681ec',
				fill: '#f9fafe',
				text: '#000000',
			},
			note: {
				fill: '#8AA3FF',
				text: '#000000',
			},
			semi: '#dce1f8',
			pattern: '#6681ee',
			highlight: {
				srgb: '#10acff',
				p3: 'color(display-p3 0.308 0.6632 0.9996)',
			},
		},
		green: {
			solid: '#099268',
			fill: '#099268',
			frame: {
				headingStroke: '#37a684',
				headingFill: '#f8fcfa',
				stroke: '#37a684',
				fill: '#f8fcfa',
				text: '#000000',
			},
			note: {
				fill: '#6FC896',
				text: '#000000',
			},
			semi: '#d3e9e3',
			pattern: '#39a785',
			highlight: {
				srgb: '#00ffc8',
				p3: 'color(display-p3 0.2536 0.984 0.7981)',
			},
		},
		grey: {
			solid: '#9fa8b2',
			fill: '#9fa8b2',
			frame: {
				headingStroke: '#aaaaab',
				headingFill: '#fbfcfc',
				stroke: '#aaaaab',
				fill: '#fcfcfd',
				text: '#000000',
			},
			note: {
				fill: '#C0CAD3',
				text: '#000000',
			},
			semi: '#eceef0',
			pattern: '#bcc3c9',
			highlight: {
				srgb: '#cbe7f1',
				p3: 'color(display-p3 0.8163 0.9023 0.9416)',
			},
		},
		'light-blue': {
			solid: '#4ba1f1',
			fill: '#4ba1f1',
			frame: {
				headingStroke: '#6cb2f3',
				headingFill: '#f8fbfe',
				stroke: '#6cb2f3',
				fill: '#fafcff',
				text: '#000000',
			},
			note: {
				fill: '#9BC4FD',
				text: '#000000',
			},
			semi: '#ddedfa',
			pattern: '#6fbbf8',
			highlight: {
				srgb: '#00f4ff',
				p3: 'color(display-p3 0.1512 0.9414 0.9996)',
			},
		},
		'light-green': {
			solid: '#4cb05e',
			fill: '#4cb05e',
			frame: {
				headingStroke: '#6dbe7c',
				headingFill: '#f8fcf9',
				stroke: '#6dbe7c',
				fill: '#fafdfa',
				text: '#000000',
			},
			note: {
				fill: '#98D08A',
				text: '#000000',
			},
			semi: '#dbf0e0',
			pattern: '#65cb78',
			highlight: {
				srgb: '#65f641',
				p3: 'color(display-p3 0.563 0.9495 0.3857)',
			},
		},
		'light-red': {
			solid: '#f87777',
			fill: '#f87777',
			frame: {
				headingStroke: '#f89090',
				headingFill: '#fffafa',
				stroke: '#f89090',
				fill: '#fffbfb',
				text: '#000000',
			},
			note: {
				fill: '#F7A5A1',
				text: '#000000',
			},
			semi: '#f4dadb',
			pattern: '#fe9e9e',
			highlight: {
				srgb: '#ff7fa3',
				p3: 'color(display-p3 0.9988 0.5301 0.6397)',
			},
		},
		'light-violet': {
			solid: '#e085f4',
			fill: '#e085f4',
			frame: {
				headingStroke: '#e59bf5',
				headingFill: '#fefaff',
				stroke: '#e59bf5',
				fill: '#fefbff',
				text: '#000000',
			},
			note: {
				fill: '#DFB0F9',
				text: '#000000',
			},
			semi: '#f5eafa',
			pattern: '#e9acf8',
			highlight: {
				srgb: '#ff88ff',
				p3: 'color(display-p3 0.9676 0.5652 0.9999)',
			},
		},
		orange: {
			solid: '#e16919',
			fill: '#e16919',
			frame: {
				headingStroke: '#e68544',
				headingFill: '#fef9f6',
				stroke: '#e68544',
				fill: '#fef9f6',
				text: '#000000',
			},
			note: {
				fill: '#FAA475',
				text: '#000000',
			},
			semi: '#f8e2d4',
			pattern: '#f78438',
			highlight: {
				srgb: '#ffa500',
				p3: 'color(display-p3 0.9988 0.6905 0.266)',
			},
		},
		red: {
			solid: '#e03131',
			fill: '#e03131',
			frame: {
				headingStroke: '#e55757',
				headingFill: '#fef7f7',
				stroke: '#e55757',
				fill: '#fef9f9',
				text: '#000000',
			},
			note: {
				fill: '#FC8282',
				text: '#000000',
			},
			semi: '#f4dadb',
			pattern: '#e55959',
			highlight: {
				srgb: '#ff636e',
				p3: 'color(display-p3 0.9992 0.4376 0.45)',
			},
		},
		violet: {
			solid: '#ae3ec9',
			fill: '#ae3ec9',
			frame: {
				headingStroke: '#bc62d3',
				headingFill: '#fcf7fd',
				stroke: '#bc62d3',
				fill: '#fdf9fd',
				text: '#000000',
			},
			note: {
				fill: '#DB91FD',
				text: '#000000',
			},
			semi: '#ecdcf2',
			pattern: '#bd63d3',
			highlight: {
				srgb: '#c77cff',
				p3: 'color(display-p3 0.7469 0.5089 0.9995)',
			},
		},
		yellow: {
			solid: '#f1ac4b',
			fill: '#f1ac4b',
			frame: {
				headingStroke: '#f3bb6c',
				headingFill: '#fefcf8',
				stroke: '#f3bb6c',
				fill: '#fffdfa',
				text: '#000000',
			},
			note: {
				fill: '#FED49A',
				text: '#000000',
			},
			semi: '#f9f0e6',
			pattern: '#fecb92',
			highlight: {
				srgb: '#fddd00',
				p3: 'color(display-p3 0.972 0.8705 0.05)',
			},
		},
		white: {
			solid: '#FFFFFF',
			fill: '#FFFFFF',
			semi: '#f5f5f5',
			pattern: '#f9f9f9',
			frame: {
				headingStroke: '#7d7d7d',
				headingFill: '#ffffff',
				stroke: '#7d7d7d',
				fill: '#ffffff',
				text: '#000000',
			},
			note: {
				fill: '#FFFFFF',
				text: '#000000',
			},
			highlight: {
				srgb: '#ffffff',
				p3: 'color(display-p3 1 1 1)',
			},
		},
	},
	darkMode: {
		id: 'dark',
		text: 'hsl(210, 17%, 98%)',
		background: 'hsl(240, 5%, 6.5%)',
		solid: '#010403',

		black: {
			solid: '#f2f2f2',
			fill: '#f2f2f2',
			frame: {
				headingStroke: '#5c5c5c',
				headingFill: '#252525',
				stroke: '#5c5c5c',
				fill: '#0c0c0c',
				text: '#f2f2f2',
			},
			note: {
				fill: '#2c2c2c',
				text: '#f2f2f2',
			},
			semi: '#2c3036',
			pattern: '#989898',
			highlight: {
				srgb: '#d2b700',
				p3: 'color(display-p3 0.8078 0.6225 0.0312)',
			},
		},
		blue: {
			solid: '#4f72fc', // 3c60f0
			fill: '#4f72fc',
			frame: {
				headingStroke: '#384994',
				headingFill: '#1C2036',
				stroke: '#384994',
				fill: '#11141f',
				text: '#f2f2f2',
			},
			note: {
				fill: '#2A3F98',
				text: '#f2f2f2',
			},
			semi: '#262d40',
			pattern: '#3a4b9e',
			highlight: {
				srgb: '#0079d2',
				p3: 'color(display-p3 0.0032 0.4655 0.7991)',
			},
		},
		green: {
			solid: '#099268',
			fill: '#099268',
			frame: {
				headingStroke: '#10513C',
				headingFill: '#14241f',
				stroke: '#10513C',
				fill: '#0E1614',
				text: '#f2f2f2',
			},
			note: {
				fill: '#014429',
				text: '#f2f2f2',
			},
			semi: '#253231',
			pattern: '#366a53',
			highlight: {
				srgb: '#009774',
				p3: 'color(display-p3 0.0085 0.582 0.4604)',
			},
		},
		grey: {
			solid: '#9398b0',
			fill: '#9398b0',
			frame: {
				headingStroke: '#42474D',
				headingFill: '#23262A',
				stroke: '#42474D',
				fill: '#151719',
				text: '#f2f2f2',
			},
			note: {
				fill: '#56595F',
				text: '#f2f2f2',
			},
			semi: '#33373c',
			pattern: '#7c8187',
			highlight: {
				srgb: '#9cb4cb',
				p3: 'color(display-p3 0.6299 0.7012 0.7856)',
			},
		},
		'light-blue': {
			solid: '#4dabf7',
			fill: '#4dabf7',
			frame: {
				headingStroke: '#075797',
				headingFill: '#142839',
				stroke: '#075797',
				fill: '#0B1823',
				text: '#f2f2f2',
			},
			note: {
				fill: '#1F5495',
				text: '#f2f2f2',
			},
			semi: '#2a3642',
			pattern: '#4d7aa9',
			highlight: {
				srgb: '#00bdc8',
				p3: 'color(display-p3 0.0023 0.7259 0.7735)',
			},
		},
		'light-green': {
			solid: '#40c057',
			fill: '#40c057',
			frame: {
				headingStroke: '#1C5427',
				headingFill: '#18251A',
				stroke: '#1C5427',
				fill: '#0F1911',
				text: '#f2f2f2',
			},
			note: {
				fill: '#21581D',
				text: '#f2f2f2',
			},
			semi: '#2a3830',
			pattern: '#4e874e',
			highlight: {
				srgb: '#00a000',
				p3: 'color(display-p3 0.2711 0.6172 0.0195)',
			},
		},
		'light-red': {
			solid: '#ff8787',
			fill: '#ff8787',
			frame: {
				headingStroke: '#6f3232', // Darker and desaturated variant of solid
				headingFill: '#341818', // Deep, muted dark red
				stroke: '#6f3232', // Matches headingStroke
				fill: '#181212', // Darker, muted background shade
				text: '#f2f2f2', // Consistent bright text color
			},
			note: {
				fill: '#7a3333', // Medium-dark, muted variant of solid
				text: '#f2f2f2',
			},
			semi: '#3c2b2b', // Subdued, darker neutral-red tone
			pattern: '#a56767', // Existing pattern shade retained
			highlight: {
				srgb: '#db005b',
				p3: 'color(display-p3 0.7849 0.0585 0.3589)',
			},
		},
		'light-violet': {
			solid: '#e599f7',
			fill: '#e599f7',
			frame: {
				headingStroke: '#6c367a',
				headingFill: '#2D2230',
				stroke: '#6c367a',
				fill: '#1C151E',
				text: '#f2f2f2',
			},
			note: {
				fill: '#762F8E',
				text: '#f2f2f2',
			},
			semi: '#383442',
			pattern: '#9770a9',
			highlight: {
				srgb: '#c400c7',
				p3: 'color(display-p3 0.7024 0.0403 0.753)',
			},
		},
		orange: {
			solid: '#f76707',
			fill: '#f76707',
			frame: {
				headingStroke: '#773a0e', // Darker, muted version of solid
				headingFill: '#2f1d13', // Deep, warm, muted background
				stroke: '#773a0e', // Matches headingStroke
				fill: '#1c1512', // Darker, richer muted background
				text: '#f2f2f2', // Bright text for contrast
			},
			note: {
				fill: '#7c3905', // Muted dark variant for note fill
				text: '#f2f2f2',
			},
			semi: '#3b2e27', // Muted neutral-orange tone
			pattern: '#9f552d', // Retained existing shade
			highlight: {
				srgb: '#d07a00',
				p3: 'color(display-p3 0.7699 0.4937 0.0085)',
			},
		},
		red: {
			solid: '#e03131',
			fill: '#e03131',
			frame: {
				headingStroke: '#701e1e', // Darker, muted variation of solid
				headingFill: '#301616', // Deep, muted reddish backdrop
				stroke: '#701e1e', // Matches headingStroke
				fill: '#1b1313', // Rich, dark muted background
				text: '#f2f2f2', // Bright text for readability
			},
			note: {
				fill: '#7e201f', // Muted dark variant for note fill
				text: '#f2f2f2',
			},
			semi: '#382726', // Dark neutral-red tone
			pattern: '#8f3734', // Existing pattern color retained
			highlight: {
				srgb: '#de002c',
				p3: 'color(display-p3 0.7978 0.0509 0.2035)',
			},
		},
		violet: {
			solid: '#ae3ec9',
			fill: '#ae3ec9',
			frame: {
				headingStroke: '#6d1583', // Darker, muted variation of solid
				headingFill: '#27152e', // Deep, rich muted violet backdrop
				stroke: '#6d1583', // Matches headingStroke
				fill: '#1b0f21', // Darker muted violet background
				text: '#f2f2f2', // Consistent bright text color
			},
			note: {
				fill: '#5f1c70', // Muted dark variant for note fill
				text: '#f2f2f2',
			},
			semi: '#342938', // Dark neutral-violet tone
			pattern: '#763a8b', // Retained existing pattern color
			highlight: {
				srgb: '#9e00ee',
				p3: 'color(display-p3 0.5651 0.0079 0.8986)',
			},
		},
		yellow: {
			solid: '#ffc034',
			fill: '#ffc034',
			frame: {
				headingStroke: '#684e12', // Darker, muted variant of solid
				headingFill: '#2a2113', // Rich, muted dark-yellow background
				stroke: '#684e12', // Matches headingStroke
				fill: '#1e1911', // Darker muted shade for background fill
				text: '#f2f2f2', // Bright text color for readability
			},
			note: {
				fill: '#8a5e1c', // Muted, dark complementary variant
				text: '#f2f2f2',
			},
			semi: '#3b352b', // Dark muted neutral-yellow tone
			pattern: '#fecb92', // Existing shade retained
			highlight: {
				srgb: '#d2b700',
				p3: 'color(display-p3 0.8078 0.7225 0.0312)',
			},
		},
		white: {
			solid: '#f3f3f3',
			fill: '#f3f3f3',
			semi: '#f5f5f5',
			pattern: '#f9f9f9',
			frame: {
				headingStroke: '#ffffff',
				headingFill: '#ffffff',
				stroke: '#ffffff',
				fill: '#ffffff',
				text: '#000000',
			},
			note: {
				fill: '#eaeaea',
				text: '#1d1d1d',
			},
			highlight: {
				srgb: '#ffffff',
				p3: 'color(display-p3 1 1 1)',
			},
		},
	},
}

/** @public */
export function getDefaultColorTheme(opts: { isDarkMode: boolean }): TLDefaultColorTheme {
	return opts.isDarkMode ? DefaultColorThemePalette.darkMode : DefaultColorThemePalette.lightMode
}

/** @public */
export const DefaultColorStyle = StyleProp.defineEnum('tldraw:color', {
	defaultValue: 'black',
	values: defaultColorNames,
})

/** @public */
export const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor', {
	defaultValue: 'black',
	values: defaultColorNames,
})

/** @public */
export type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>