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

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

import {
	MenuGroup,
	MenuItem,
	DropdownMenu,
	Modal,
} from '@wordpress/components'

import {
	reset as resetIcon,
	moreVertical as moreVerticalIcon,
	code as codeIcon,
	trash as trashIcon,
} from '@wordpress/icons'

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

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

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

import {
	IS_DEBUG,
	parseJson,
} from '@ska/utils'

import {
	isManagedVariation,
	useVariation,
	useVariationOptionsEdit,
	type VariationSlug,
} from '../..'

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

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

export const useVariationActions = (slug: VariationSlug): [
	({onClose}: {onClose: () => void}) => React.ReactNode[],
	React.ReactNode,
] => {

	const [showInspect, setShowInspect] = useState(false)

	const {
		createSuccessNotice,
	} = useDispatch(noticesStore)

	const [, dispatch] = useVariationOptionsEdit()

	const variation = useVariation(slug)

	const {
		title,
		variation: variationJson = '{}',
	} = variation || {}

	const attributes = parseJson(variationJson, `Variation: ${slug}`) as tBlockAttributes

	const isManaged = isManagedVariation(slug)
	const canDelete = !isManaged

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

	const originalAttributes = parseJson(originalVariationJson, `Variation: ${slug}`) as tBlockAttributes

	const isDifferent = isManaged && variationJson !== originalVariationJson

	const actions = ({onClose}: {onClose: () => void}) => {
		return [
			...(IS_DEBUG ? [
				<MenuGroup key='actions'>
					<MenuItem
						icon={codeIcon}
						children={__('Inspect', 'ska-blocks')}
						onClick={() => {
							setShowInspect(true)
							onClose()
						}}
					/>
				</MenuGroup>,
			] : []),
			<MenuGroup key='reset'>
				{isManaged && <>
					<MenuItem
						icon={resetIcon}
						children={__('Reset variation to default', 'ska-blocks')}
						aria-disabled={!isDifferent}
						disabled={!isDifferent}
						onClick={() => {
							dispatch.updateVariation(slug, {variation: originalVariationJson})
							createSuccessNotice(sprintf(__('Variation "%s" has been reset to default.'), title), {type: 'snackbar'})
							onClose()
						}}
					/>
				</>}
				{canDelete && <>
					<MenuItem
						icon={trashIcon}
						children={__('Delete variation', 'ska-blocks')}
						onClick={() => {
							dispatch.deleteVariation(slug)
							createSuccessNotice(sprintf(__('Variation "%s" deleted.'), title), {type: 'snackbar'})
							onClose()
						}}
					/>
				</>}
			</MenuGroup>,
		]
	}

	const components = <>
		{showInspect && (
			<Modal
				size='fill'
				title={sprintf(__('Variation: %s', 'ska-blocks'), title)}
				onRequestClose={() => setShowInspect(false)}
			>
				<Pre
					value={{
						variation: {
							...variation,
							variation: attributes,
						},
						original: {
							...original,
							variation: originalAttributes,
						},
					}}
				/>
			</Modal>
		)}
	</>

	return [actions, components]
}


export interface VariationActionsProps {
	slug: VariationSlug
}

export const VariationActions: React.FC<VariationActionsProps> = ({slug}) => {

	const [actions, components] = useVariationActions(slug)

	return <>
		<DropdownMenu
			icon={moreVerticalIcon}
			label={__('Variation actions', 'ska-blocks')}
			toggleProps={{size: 'small'}}
		>
			{({onClose}) => actions({onClose})}
		</DropdownMenu>
		{components}
	</>
}

export default VariationActions