import {__, _x} from '@wordpress/i18n'

import {
	useMemo,
} from '@wordpress/element'

import {
	getAnyPaletteValue,
	NON_COLORS,
} from './parser'

import {
	useSkaBlocks,
} from './hooks'

import type {
	ButtonGroupOption,
} from '@ska/components'

export const themePaletteDefaultValue = {
	'DEFAULT': '',
}

export type ThemePaletteValue = typeof themePaletteDefaultValue & {
	[key: string]: string,
}

export const colorPaletteDefaultValue = {
	50: '',
	100: '',
	200: '',
	300: '',
	400: '',
	500: '',
	600: '',
	700: '',
	800: '',
	900: '',
	950: '',
}

export type ColorPaletteValue = typeof colorPaletteDefaultValue

/** Separate color options into groups. */
export const useColorWithOptions = (
	/** Current value (`transparent`, `black`, `red-500`, `site-heading`, `blue-600/50`...). */
	currentValue: string = '',
	/** All color options. */
	options?: Map<string, string | Map<string, string>>
) => {

	const {
		parser,
		compiler: {
			colors: {
				basicColors: colors,
				themeColors: themePalette,
				paletteColors: colorPalette,
			},
			resolveColorValue,
		},
	} = useSkaBlocks()

	const color = useMemo(() => parser.parseColor(currentValue), [parser, currentValue])

	const {
		isTheme,
		isPalette,
		palette,
	} = color

	const colorOptions = useMemo(() => {
		const colorOptions = options || new Map<string, string | Map<string, string>>()
		if(!options) { // Populate options, if they haven't been provided
			colors.forEach((value, key) => colorOptions.set(key, value))
			themePalette.forEach((value, key) => colorOptions.set(key, value))
			colorPalette.forEach((value, key) => colorOptions.set(key, value))
		}
		return colorOptions
	}, [options, colors, themePalette, colorPalette])

	const themeKeys = Array.from(themePalette.keys())
	const basicColors = new Map<string, string>()
	const themeColors = new Map<string, ThemePaletteValue>()
	const paletteColors = new Map<string, ColorPaletteValue>()
	colorOptions.forEach((value, key) => {
		if(value instanceof Map) {
			if(themeKeys.includes(key)) {
				themeColors.set(key, Object.fromEntries(value) as ThemePaletteValue)
			} else {
				paletteColors.set(key, Object.fromEntries(value.entries().filter(([k]) => k !== 'DEFAULT')) as ColorPaletteValue)
			}
			basicColors.set(key, getAnyPaletteValue(value))
		} else {
			basicColors.set(key, value)
		}
	})

	const basicColorOptions: ButtonGroupOption[] = []
	basicColors.forEach((value, key) => {
		basicColorOptions.push({
			label: key,
			value: key,
			tooltip: value,
			...(!NON_COLORS.includes(key) && {
				color: resolveColorValue(value),
			}),
		})
	})

	const themeColorOptions: ButtonGroupOption[] = []
	if(isTheme) {
		const colorsOfSelectedPalette = themeColors.get(palette)
		if(colorsOfSelectedPalette) {
			Object.keys(colorsOfSelectedPalette).forEach(key => {
				themeColorOptions.push({
					label: key,
					value: `${palette}-${key}`,
					tooltip: colorsOfSelectedPalette[key],
					...(!NON_COLORS.includes(key) && {
						color: resolveColorValue(colorsOfSelectedPalette[key]),
					}),
				})
			})
		}
	}

	const paletteColorOptions: ButtonGroupOption[] = []
	if(isPalette) {
		const colorsOfSelectedPalette = paletteColors.get(palette)
		if(colorsOfSelectedPalette) {
			Object.keys(colorsOfSelectedPalette).forEach(key => {
				paletteColorOptions.push({
					label: key,
					value: `${palette}-${key}`,
					tooltip: colorsOfSelectedPalette[key as any as keyof ColorPaletteValue],
					...(!NON_COLORS.includes(key) && {
						color: resolveColorValue(colorsOfSelectedPalette[key as any as keyof ColorPaletteValue]),
					}),
				})
			})
		}
	}

	return {
		color,
		colorOptions,
		basicColorOptions,
		themeColorOptions,
		paletteColorOptions,
		basicColors,
		themeColors,
		paletteColors,
	}
}