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

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

import {
	Button,
	__experimentalToolsPanel as ToolsPanel,
	__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components'

import {
	TailwindFeatureContext,
	TailwindFeatureGroupContext,
	FeatureInspectorControls,
	TailwindFeatureClassNamesContext,
} from '.'

import Dropdown from './dropdown'
import ToggleButton from './toggle-button'

import {
	INSTANTIATED_DEFAULT_VALUE,
} from '../attributes'

import {
	useSkaBlocksDispatch,
} from '../reducer'

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

import {
	usePluginPreference,
} from '../../store'

import type {
	tBlockEditProps,
} from '@ska/shared'

export interface FeatureGroupInspectorControlsProps {
	attributes: tBlockEditProps['attributes']
	setAttributes: tBlockEditProps['setAttributes']
}

/**
 * This component renders InspectorControls for a TailwindFeatureGroup.
 */
const FeatureGroupInspectorControls: React.FC<FeatureGroupInspectorControlsProps> = ({
	attributes,
	setAttributes,
}) => {

	const {
		label,
		features,
	} = useContext(TailwindFeatureGroupContext)

	const [showNestedSelectors] = usePluginPreference('showNestedSelectors')
	const {ref: copyRef, label: copyLabel, icon: copyIcon} = useCopyTailwindClasses(
		(showNestedSelectors
			? features.map(feature => feature.getTailwindClasses('', attributes))
			: features.map(feature => feature.getRootTailwindClasses('', attributes))
		).filter(v => v).join(' ').trim()
	)
	const dispatch = useSkaBlocksDispatch(attributes, setAttributes)

	return (
		<ToolsPanel
			className='ska-blocks__tailwind-inspector-controls__feature-group'
			label={label}
			resetAll={() => {
				dispatch.setAttributes(
					Object.fromEntries(
						features.map(feature => [feature.id, undefined])
					)
				)
			}}
		>
			<Button
				className='ska-blocks__tailwind-inspector-controls__feature-group__copy-button'
				size='small'
				icon={copyIcon}
				label={copyLabel}
				ref={copyRef}
			/>
			<div className='ska-blocks__tailwind-inspector-controls__feature-group__panel'>
				{features.map(feature => {

					const hasValue = feature.hasValue(attributes, showNestedSelectors)

					const {
						skaBlocksSelectors = {},
						skaBlocksOptions = {},
						...rootAttributes
					} = attributes

					const classes = feature.getTailwindClasses('', rootAttributes)
					const selectorsClasses = showNestedSelectors ? feature.getTailwindClasses('', {skaBlocksSelectors, skaBlocksOptions}) : ''

					return (
						<TailwindFeatureContext.Provider
							key={`${feature.id}-${hasValue ? `1` : `0`}`}
							value={feature}
						>
							<TailwindFeatureClassNamesContext.Provider
								value={{
									classNames: classes,
									selectorsClassNames: selectorsClasses,
								}}
							>
								<ToolsPanelItem
									label={feature.label}
									hasValue={() => hasValue}
									onSelect={() => {
										setAttributes({[feature.id]: INSTANTIATED_DEFAULT_VALUE})
									}}
									onDeselect={() => {
										dispatch.setAttributes({[feature.id]: undefined})
									}}
									isShownByDefault={hasValue}
									className='ska-blocks__tailwind-inspector-controls__feature-group__panel__item'
								>
									<Dropdown
										renderToggle={({onToggle, isOpen}) => (
											<ToggleButton
												isOpen={isOpen}
												onClick={onToggle}
											/>
										)}
										renderContent={() => (
											<FeatureInspectorControls
												attributes={attributes}
												dispatch={dispatch}
											/>
										)}
									/>
								</ToolsPanelItem>
							</TailwindFeatureClassNamesContext.Provider>
						</TailwindFeatureContext.Provider>
					)
				})}
			</div>
		</ToolsPanel>
	)
}

export default FeatureGroupInspectorControls