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

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

import {
	TailwindFeatureContext,
	Radio,
} from '..'

import Pills from './Pills'

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

import {
	parseVariantValue,
} from '../../classNames'

import type {
	ControlProps,
} from '.'

const parseFontSizeValue = (value: string) => {

	const [fontSize = '', lineHeight = ''] = value.split('/')

	return {
		fontSize,
		lineHeight,
	}
}

const FontSize: React.FC<ControlProps> = props => {

	const {
		label,
		controls,
		supports,
		variant,
		valueKey,
		value,
		arbitraryValues = [],
		dispatch,
	} = props

	const {
		id,
		getOptions,
	} = useContext(TailwindFeatureContext)

	const lineHeight = useSkaBlocks().tailwind.getFeature('lineHeight')
	if(!lineHeight) {
		return <Pills {...props} />
	}

	const options = getOptions(arbitraryValues) as Map<string, string>
	const lineHeightOptions = lineHeight.getOptions(arbitraryValues) as Map<string, string>

	const {
		withPrefixSuffix,
		cleanValue,
	} = parseVariantValue(value)

	const {
		fontSize: fontSizeValue,
		lineHeight: lineHeightValue,
	} = parseFontSizeValue(cleanValue)

	const removeArbitraryValue = (valueToRemove: string) => {
		dispatch.batch([
			dispatch.actions.removeArbitraryValue({
				feature: id,
				value: valueToRemove,
			}),
			...(fontSizeValue === valueToRemove ? [
				dispatch.actions.setVariantValue({
					feature: id,
					variant,
					key: valueKey,
					value: '',
				}),
			] : [
				...(lineHeightValue === valueToRemove ? [
					dispatch.actions.setVariantValue({
						feature: id,
						variant,
						key: valueKey,
						value: fontSizeValue,
					}),
				] : []),
			]),
		])
	}

	return <>
		<Radio
			label={label}
			hideLabelFromVision={controls.length < 2}
			pills
			isSmall
			supports={supports}
			options={options}
			arbitraryValues={arbitraryValues}
			value={withPrefixSuffix(fontSizeValue)}
			onChange={nextValue => {
				const {
					withPrefixSuffix,
					cleanValue: nextFontSizeValue,
				} = parseVariantValue(nextValue)
				const nextLineHeightValue = nextValue ? lineHeightValue : ''
				dispatch.setVariantValue({
					feature: id,
					variant,
					key: valueKey,
					value: withPrefixSuffix([nextFontSizeValue, nextLineHeightValue].filter(v => v).join('/')),
				})
			}}
			onAdd={valueToAdd => {
				dispatch.batch([
					dispatch.actions.addArbitraryValue({feature: id, value: valueToAdd}),
					...(fontSizeValue !== valueToAdd ? [
						dispatch.actions.setVariantValue({
							feature: id,
							variant,
							key: valueKey,
							value: withPrefixSuffix([valueToAdd, lineHeightValue].filter(v => v).join('/')),
						}),
					] : []),
				])
			}}
			onUpdate={(nextValue, prevValue) => {
				const nextLineHeightValue = lineHeightValue === prevValue ? nextValue : lineHeightValue
				dispatch.batch([
					dispatch.actions.updateArbitraryValue({
						feature: id,
						nextValue,
						prevValue,
					}),
					dispatch.actions.setVariantValue({
						feature: id,
						variant,
						key: valueKey,
						value: withPrefixSuffix([nextValue, nextLineHeightValue].filter(v => v).join('/')),
						toggle: false,
					}),
				])
			}}
			onRemove={removeArbitraryValue}
		/>
		<Radio
			label={lineHeight.label}
			pills
			isSmall
			supports={{
				...supports,
				important: false,
			}}
			options={lineHeightOptions}
			arbitraryValues={arbitraryValues}
			value={lineHeightValue}
			onChange={nextValue => {
				if(!fontSizeValue) {
					return // Can't select line height before font size is specified.
				}
				dispatch.setVariantValue({
					feature: id,
					variant,
					key: valueKey,
					value: withPrefixSuffix([fontSizeValue, nextValue].filter(v => v).join('/')),
				})
			}}
			onAdd={valueToAdd => {
				dispatch.batch([
					dispatch.actions.addArbitraryValue({feature: id, value: valueToAdd}),
					...(fontSizeValue && lineHeightValue !== valueToAdd ? [
						dispatch.actions.setVariantValue({
							feature: id,
							variant,
							key: valueKey,
							value: withPrefixSuffix([fontSizeValue, valueToAdd].filter(v => v).join('/')),
						}),
					] : []),
				])
			}}
			onUpdate={(nextValue, prevValue) => {
				const nextFontSizeValue = fontSizeValue === prevValue ? nextValue : fontSizeValue
				dispatch.batch([
					dispatch.actions.updateArbitraryValue({
						feature: id,
						nextValue,
						prevValue,
					}),
					...(nextFontSizeValue ? [
						dispatch.actions.setVariantValue({
							feature: id,
							variant,
							key: valueKey,
							value: withPrefixSuffix([nextFontSizeValue, nextValue].filter(v => v).join('/')),
							toggle: false,
						}),
					] : []),
				])
			}}
			onRemove={removeArbitraryValue}
		/>
	</>
}

export default FontSize