import * as React from 'react'
import {__, _x} from '@wordpress/i18n'

import ThemeEditor from './theme-editor'

import {
	RecordEditor,
	FontControl,
	ColorIndicatorContext,
} from '@ska/components'

import {
	type OptionsControls,
	type RenderOptionProps,
} from '@ska/plugin'

import type {
	Tailwind4Options,
} from '../options'

import {
	FontSourcesProvider,
} from '../../../components'

import {
	useSkaBlocks,
} from '../../../tailwind'

import {
	default as ThemePaletteControl,
	ThemePaletteControlContext,
} from './theme-palette-control'

import type {
	ThemePaletteValue,
} from '../../../tailwind/colors'

type ControlProps<T> = RenderOptionProps<Tailwind4Options, T>

const controls: OptionsControls<Tailwind4Options, any> = {

	'theme-editor': (props: ControlProps<string>) => <ThemeEditor {...props} />,

	'theme-palette': (props: ControlProps<Record<string, ThemePaletteValue>>) => {

		const {
			compiler: {
				resolveColorValue: transformColorValue,
			},
		} = useSkaBlocks()

		const {
			value,
			onChange,
			...option
		} = props

		const {
			id,
			label,
			description,
			default: defaultValue = {},
			props: controlProps = {},
		} = option

		return (
			<ThemePaletteControlContext.Provider value={{defaultValue}}>
				<ColorIndicatorContext.Provider value={{transformColorValue}}>
					<RecordEditor
						id={id}
						size='large'
						label={label}
						help={description}
						value={value}
						onChange={onChange}
						lockedKeys={Object.keys(defaultValue)}
						ValueControl={ThemePaletteControl}
						{...controlProps}
					/>
				</ColorIndicatorContext.Provider>
			</ThemePaletteControlContext.Provider>
		)
	},

	font: (props: ControlProps<Record<string, string>>) => {

		const {
			value,
			onChange,
			...option
		} = props

		const {
			id,
			label,
			description,
			default: defaultValue = {},
			props: controlProps = {},
		} = option

		const DEFAULT_FONT_VALUE = [
			'ui-sans-serif',
			'system-ui',
			'sans-serif',
			'"Apple Color Emoji"',
			'"Segoe UI Emoji"',
			'"Segoe UI Symbol"',
			'"Noto Color Emoji"',
		].join(',')

		return (
			<FontSourcesProvider>
				<RecordEditor
					id={id}
					size='large'
					label={label}
					help={description}
					value={value}
					onChange={onChange}
					lockedKeys={Object.keys(defaultValue)}
					ValueControl={FontControl}
					defaultValue={DEFAULT_FONT_VALUE}
					{...controlProps}
				/>
			</FontSourcesProvider>
		)
	},
}

export default controls