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

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

import {
	__experimentalVStack as VStack,
} from '@wordpress/components'

import {
	ActionInput,
	Button,
} from '@ska/components'

import Radio from '../radio'

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

import {
	Attribute,
	VARIANT_DEFAULT_STATE,
	TailwindFeatureAttribute,
} from '../../../tailwind/attributes'

export interface AddVariantProps {
	currentVariants?: TailwindFeatureAttribute[Attribute.VARIANTS]
	onAdd: (variant: keyof TailwindFeatureAttribute[Attribute.VARIANTS], defaultValue?: TailwindFeatureAttribute[Attribute.VARIANTS]['value']) => void
	setActiveVariant: (activeVariant: keyof TailwindFeatureAttribute[Attribute.VARIANTS]) => void
}

const AddVariant: React.FC<AddVariantProps> = ({
	currentVariants = {},
	onAdd,
	setActiveVariant,
}) => {

	const [variant, setVariant] = useState<string>('')
	const [inheritFrom, setInheritFrom] = useState<string>('')
	const [showMore, setShowMore] = useState<boolean>(false) // TODO: parser has a list of all available variants

	const {
		compiler: {
			variantOptions: VARIANTS,
		},
	} = useSkaBlocks()

	const usedVariants = Object.keys(currentVariants)

	const USED_VARIANTS = usedVariants.map(variant => ({
		label: variant === VARIANT_DEFAULT_STATE ? _x('Default', 'Label for "default state" variant', 'ska-blocks') : variant,
		value: variant,
	}))

	const addVariant = (variant: string, inheritFrom?: string) => {
		onAdd(
			variant,
			inheritFrom ? (
				Object(currentVariants).hasOwnProperty(inheritFrom)
					? currentVariants[inheritFrom]
					: undefined
			) : undefined
		)
	}

	return (
		<VStack>
			<ActionInput
				id='ska-add-variant'
				className='ska-blocks--use-code-inputs'
				label={_x('Add variant', 'with-variants', 'ska-blocks')}
				clearLabel={_x('Clear value', 'action-input', 'ska-blocks')}
				placeholder={_x('Variant(s)…', 'with-variants', 'ska-blocks')}
				actionLabel={_x('Add', 'with-variants', 'ska-blocks')}
				value={variant}
				onChange={nextValue => {
					setVariant(nextValue)
				}}
				onSubmit={value => {
					addVariant(value, inheritFrom)
					setVariant('')
				}}
				onClear={() => setVariant('')}
				disabled={usedVariants.includes(variant)}
			/>
			<Radio
				label={_x('Select one or more variants', 'with-variants', 'ska-blocks')}
				pills
				isSmall
				type='variants'
				options={VARIANTS.slice(0, showMore ? VARIANTS.length : 22)}
				isActive={value => variant.split(':').filter(v => v).includes(value)}
				onChange={value => {
					const variants = variant.split(':').filter(v => v)
					setVariant(
						variants.includes(value)
							? variants.filter(v => v !== value).join(':')
							: (
								variants.length > 0
									? variants.concat(value).join(':')
									: value
							)
					)
				}}
				onDoubleClick={value => {
					if(!usedVariants.includes(value)) {
						addVariant(value, inheritFrom)
					}
					setVariant('')
					setActiveVariant(value)
				}}
				onAdd={arbitraryValue => {
					setVariant([variant, `[${arbitraryValue}]`].filter(v => v).join(':'))
				}}
			/>
			{!showMore && (
				<Button
					variant='primary'
					size='small'
					children={__('Show all variants…', 'ska-blocks')}
					onClick={() => setShowMore(true)}
					style={{alignSelf: 'flex-start'}}
				/>
			)}
			<Radio
				label={_x('Copy initial value from', 'with-variants', 'ska-blocks')}
				help={_x(`Select an existing variant from above to duplicate its' value to any new variants that are added.`, 'with-variants', 'ska-blocks')}
				pills
				isSmall
				options={USED_VARIANTS}
				value={inheritFrom}
				onChange={nextValue => setInheritFrom(inheritFrom === nextValue ? '' : nextValue)}
			/>
		</VStack>
	)
}

export default AddVariant