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

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

import {
	DropdownMenu,
	MenuGroup,
	MenuItem,
	Fill,
	__experimentalNavigatorScreen as NavigatorScreen,
} from '@wordpress/components'

import {
	starFilled as starIcon,
	brush as brushIcon,
	create as createIcon,
} from '@wordpress/icons'

import {
	Panel,
	PanelHeader,
	PanelBody,
	InspectorControlsContext,
} from '../../../tailwind/inspector-controls'

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

import {
	CreatePreset,
	PresetsModal,
	PresetEdit,
	PresetsList,
	useBlockPresets,
} from '..'

import type {
	TailwindValue,
} from '../../tailwind'

const PresetsInspectorControls: React.FC = () => {

	const {
		attributes,
		setAttributes,
		features,
	} = useContext(InspectorControlsContext)

	const {
		skaBlocks = {},
		skaBlocksSelectors = {},
		skaBlocksVariables = {},
	} = attributes

	const {
		p = [],
	} = skaBlocks as TailwindValue

	const allBlockPresets = useBlockPresets(p) // Includes missing presets
	const blockPresets = allBlockPresets.filter(({ref}) => ref !== '404')

	const dispatch = useSkaBlocksDispatch(attributes, setAttributes)
	const [createPresetModalOpen, setCreatePresetModalOpen] = useState(false)
	const [presetsModalOpen, setPresetsModalOpen] = useState(false)

	const canCreatePreset = (
		Object.keys(skaBlocksSelectors).length > 0
		|| Object.keys(skaBlocksVariables).length > 0
		|| features.filter(({hasValue}) => hasValue).length > 0
	)

	return <>
		<Fill name='ska.blocks.InspectorControls.menus'>
			<DropdownMenu
				icon={brushIcon}
				label={__('Presets actions', 'ska-blocks')}
				toggleProps={{size: 'small'}}
			>
				{({onClose}) => (
					<MenuGroup>
						<MenuItem
							icon={starIcon}
							children={__('Presets', 'ska-blocks')}
							onClick={() => {
								setPresetsModalOpen(true)
								onClose()
							}}
						/>
						{canCreatePreset && (
							<MenuItem
								icon={createIcon}
								children={__('Create preset', 'ska-blocks')}
								onClick={() => {
									setCreatePresetModalOpen(true)
									onClose()
								}}
							/>
						)}
					</MenuGroup>
				)}
			</DropdownMenu>
		</Fill>
		{allBlockPresets.length > 0 && (
			<Fill name='ska.blocks.InspectorControls.before'>
				<Panel>
					<PanelHeader label={__('Presets', 'ska-blocks')} />
					<PanelBody>
						<PresetsList
							presets={allBlockPresets}
							dispatch={dispatch}
						/>
					</PanelBody>
				</Panel>
			</Fill>
		)}
		<Fill name='ska.blocks.InspectorControls.screens'>
			{blockPresets.map(({id}) => (
				<NavigatorScreen key={id} path={`/preset/${id}`}>
					<PresetEdit id={id} />
				</NavigatorScreen>
			))}
		</Fill>
		<Fill name='ska.blocks.InspectorControls.after'>
			{createPresetModalOpen && (
				<CreatePreset
					onRequestClose={() => setCreatePresetModalOpen(false)}
				/>
			)}
			{presetsModalOpen && (
				<PresetsModal
					onAddPreset={slug => dispatch.addPreset(slug)}
					onRemovePreset={slug => dispatch.removePreset(slug)}
					onRequestClose={() => setPresetsModalOpen(false)}
				/>
			)}
		</Fill>
	</>
}

export default PresetsInspectorControls