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

import {
	Button,
	Notice,
	DropdownMenu,
	MenuGroup,
	MenuItem,
	Fill,
	__experimentalVStack as VStack,
	Icon,
} from '@wordpress/components'

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

import {
	useDispatch,
} from '@wordpress/data'

import {
	store as noticesStore,
} from '@wordpress/notices'

import {
	reset as resetIcon,
	trash as trashIcon,
	update as updateIcon,
	create as createIcon,
	edit as editIcon,
	blockDefault as blockIcon,
} from '@wordpress/icons'

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

import {
	NEGATIVE_COLOR,
	SYNCED_COLOR,
} from '../../../data'

import {
	CreateVariation,
	EditVariation,
	useApplyVariation,
	useVariationSlug,
	useVariationOptionsEdit,
	type VariationsAttributes,
	useVariation,
} from '..'

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

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

	const [, dispatch] = useVariationOptionsEdit()
	const [createVariationModalOpen, setCreateVariationModalOpen] = useState(false)
	const [editVariationModalOpen, setEditVariationModalOpen] = useState(false)

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

	const {
		skaBlocksVariation,
	} = attributes as tBlockAttributes & VariationsAttributes

	const variationSlug = useVariationSlug(skaBlocksVariation)

	const isMissing = !variationSlug
	const variation = useVariation(skaBlocksVariation)
	const applyVariation = useApplyVariation(clientId, variation)

	const {
		createErrorNotice,
	} = useDispatch(noticesStore)

	const removeVariation = () => {
		setAttributes({skaBlocksVariation: undefined})
	}

	const deleteVariation = () => {
		if(variationSlug) {
			removeVariation()
			dispatch.deleteVariation(variationSlug)
		} else {
			createErrorNotice(sprintf(__('Variation "%d" not found', 'ska-blocks'), variationSlug), {type: 'snackbar'})
		}
	}

	return <>
		<Fill name='ska.blocks.InspectorControls.menus'>
			<DropdownMenu
				icon={(
					<Icon
						icon={blockIcon}
						{...(variationSlug && {
							...(!isMissing && {
								color: SYNCED_COLOR,
							}),
							...(isMissing && {
								color: NEGATIVE_COLOR,
							}),
						})}
					/>
				)}
				label={__('Block variations actions', 'ska-blocks')}
				toggleProps={{size: 'small'}}
			>
				{({onClose}) => <>
					<MenuGroup>
						<MenuItem
							icon={createIcon}
							children={__('Create variation', 'ska-blocks')}
							onClick={() => {
								setCreateVariationModalOpen(true)
								onClose()
							}}
						/>
						{!!variationSlug && <>
							{!isMissing && <>
								<MenuItem
									icon={editIcon}
									children={__('Edit variation', 'ska-blocks')}
									onClick={() => {
										setEditVariationModalOpen(true)
										onClose()
									}}
								/>
								<MenuItem
									icon={updateIcon}
									children={__('Re-apply variation', 'ska-blocks')}
									onClick={() => {
										applyVariation()
										onClose()
									}}
								/>
							</>}
							<MenuItem
								icon={resetIcon}
								children={__('Remove variation', 'ska-blocks')}
								onClick={() => {
									removeVariation()
									onClose()
								}}
							/>
							{!isMissing && (
								<MenuItem
									icon={trashIcon}
									children={__('Delete variation', 'ska-blocks')}
									onClick={() => {
										deleteVariation()
										onClose()
									}}
								/>
							)}
						</>}
					</MenuGroup>
				</>}
			</DropdownMenu>
		</Fill>
		{!!variationSlug && isMissing && (
			<Fill name='ska.blocks.InspectorControls.before'>
				<Panel>
					<PanelHeader label={__('Variation', 'ska-blocks')} />
					<PanelBody>
						<VStack>
							<Notice
								status='error'
								isDismissible={false}
								children={sprintf(__('Variation "%d" not found', 'ska-blocks'), variationSlug)}
							/>
							<Button
								variant='secondary'
								size='small'
								icon={resetIcon}
								children={__('Remove missing variation from block', 'ska-blocks')}
								onClick={removeVariation}
							/>
						</VStack>
					</PanelBody>
				</Panel>
			</Fill>
		)}
		<Fill name='ska.blocks.InspectorControls.after'>
			{createVariationModalOpen && (
				<CreateVariation
					clientId={clientId}
					onCreated={variationSlug => setAttributes({skaBlocksVariation: variationSlug})}
					onRequestClose={() => setCreateVariationModalOpen(false)}
				/>
			)}
			{!!variationSlug && !isMissing && editVariationModalOpen && (
				<EditVariation
					id={variationSlug}
					clientId={clientId}
					onRequestClose={() => setEditVariationModalOpen(false)}
				/>
			)}
		</Fill>
	</>
}

export default VariationsInspectorControls