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

import {
	BaseControl,
	__experimentalView as View,
	__experimentalHStack as HStack,
	__experimentalVStack as VStack,
	Notice,
} from '@wordpress/components'

import {
	Label,
} from '@ska/components'

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

import {
	isManagedVariation,
	useVariationOptionsEdit,
	VariationActions,
	type Variations,
} from '../..'

import {
	managedVariations,
} from '../../../../data'

import {
	type PluginOptions,
} from '../../../../plugins/options'

import './style.scss'

// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface VariationsControlProps extends RenderOptionProps<PluginOptions, true> {}

const VariationsControl: React.FC<VariationsControlProps> = props => {

	const [select, dispatch] = useVariationOptionsEdit()
	const variations = select.getOption('variations') as Variations

	const {
		category,
	} = props

	const {
		id: categoryId,
		label: categoryLabel,
	} = category

	const haveVariations = Object.keys(variations).length > 0

	return (
		<BaseControl
			id={`ska-variations-control-${categoryId}`}
			className='ska-blocks__variations-control'
			label={categoryLabel}
			hideLabelFromVision
			__nextHasNoMarginBottom
		>
			{haveVariations && <>
				<VStack>
					{Object.entries(variations).map(([slug, variation]) => {

						const {
							title,
							description,
							block,
							variation: variationJson,
						} = variation

						const isManaged = isManagedVariation(slug)

						const original = managedVariations[slug] || {}
						const {
							variation: originalVariationJson = '',
						} = original

						const isModified = isManaged && variationJson !== originalVariationJson

						return (
							<View
								key={slug}
								id={`ska-variation-${slug}`}
								className={cx('ska-blocks__variations-control__variation', {
									'ska-blocks__variations-control__preset--managed': isManaged,
								})}
							>
								<VStack alignment='start'>
									<HStack
										className='ska-blocks__variations-control__variation__controls'
										alignment='start'
									>
										<label
											className='ska-blocks__variations-control__variation__label'
											htmlFor={`ska-variation-${slug}`}
										>
											<span>{__('Variation', 'ska-blocks')}</span>
											{title}
										</label>
										<HStack alignment='center' justify='end'>
											<VariationActions slug={slug} />
										</HStack>
									</HStack>
									<code>{block}</code>
									{isModified && <Label color='orange'>{__('Modified', 'ska-blocks')}</Label>}
									{!!description && <p className='description'>{description}</p>}
								</VStack>
							</View>
						)
					})}
				</VStack>
			</>}
			{!haveVariations && <>
				<Notice
					status='info'
					isDismissible={false}
					children={__(`There are no variations.`, 'ska-blocks')}
				/>
			</>}
		</BaseControl>
	)
}

export default VariationsControl