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

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

import {
	ToggleControl,
	TextControl,
	Modal,
	__experimentalVStack as VStack,
} from '@wordpress/components'

import {
	ButtonGroup,
	RecordEditorRecordContext,
} from '@ska/components'

import {
	DynamicShortcodesControlContext,
} from '.'

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

import './style.scss'

export interface ShortcodeSettingsModalProps {
	onRequestClose: () => void
}

const TYPE_OPTIONS = [
	{
		label: _x('Text', 'Dynamic shortcode type', 'ska-blocks'),
		value: 'text',
	},
	{
		label: _x('Textarea', 'Dynamic shortcode type', 'ska-blocks'),
		value: 'textarea',
	},
	{
		label: _x('Toggle', 'Dynamic shortcode type', 'ska-blocks'),
		value: 'toggle',
	},
]

const DEFAULT_SETTINGS = {
	widget: false,
	type: 'text',
	label: '',
}

const ShortcodeSettingsModal: React.FC<ShortcodeSettingsModalProps> = props => {

	const {
		onRequestClose,
	} = props

	const {
		key,
	} = useContext(RecordEditorRecordContext)

	const {
		select,
		dispatch,
	} = useContext(DynamicShortcodesControlContext)

	if(!select || !dispatch) {
		return null
	}

	const value = select.getOption('dynamicShortcodeOptions') as PluginOptions['dynamicShortcodeOptions']
	const shortcodeSettings = value[key] || DEFAULT_SETTINGS

	const {
		widget = false,
		type = 'text',
		wide = false,
		label = '',
	} = shortcodeSettings

	const updateSetting = (settingKey: keyof typeof value, settingValue: any) => {
		dispatch.updateOption({
			option: 'dynamicShortcodeOptions',
			value: {
				...value,
				[key]: {
					...DEFAULT_SETTINGS,
					...shortcodeSettings,
					[settingKey]: settingValue,
				},
			},
		})
	}

	return <>
		<Modal
			title={`${__('Dynamic shortcode settings', 'ska-blocks')}: "${key}"`}
			size='medium'
			className='ska-blocks__dynamic-shortcodes__settings'
			onRequestClose={onRequestClose}
		>
			<VStack spacing={4}>
				<ToggleControl
					label={__('Widget', 'ska-blocks')}
					help={__('Display this option in a widget on WordPress admin Dashboard for quick editing.', 'ska-blocks')}
					checked={widget}
					onChange={() => updateSetting('widget', !widget)}
					__nextHasNoMarginBottom
				/>
				{widget && <>
					<ButtonGroup.Radio
						label={__('Type', 'ska-blocks')}
						options={TYPE_OPTIONS}
						value={type}
						onChange={(value: string) => updateSetting('type', value || 'text')}
					/>
					<ToggleControl
						label={__('Wide', 'ska-blocks')}
						help={__('Render this option full width in the widget.', 'ska-blocks')}
						checked={wide}
						onChange={() => updateSetting('wide', !wide)}
						__nextHasNoMarginBottom
					/>
					<TextControl
						label={__('Label', 'ska-blocks')}
						help={__('Override the display label (in dashboard widget).', 'ska-blocks')}
						placeholder={key}
						value={label}
						onChange={nextValue => updateSetting('label', nextValue)}
						__nextHasNoMarginBottom
						__next40pxDefaultSize
					/>
				</>}
			</VStack>
		</Modal>
	</>
}

export default ShortcodeSettingsModal