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

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

import {
	Fill,
} from '@wordpress/components'

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

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

import {
	VariablesUI,
} from '.'

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

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

	const dispatch = useSkaBlocksDispatch(attributes, setAttributes)

	const {
		skaBlocksVariables = {},
	} = attributes

	const {
		record = {},
	} = skaBlocksVariables

	return <>
		<Fill name='ska.blocks.InspectorControls.before'>
			<VariablesUI
				key={`variables-${clientId}`}
				record={record}
				onChange={record => dispatch.setAttributes({skaBlocksVariables: {...skaBlocksVariables, record}})}
			/>
		</Fill>
		<Fill name='ska.blocks.InspectorControls.preset.before'>
			{({presetId, attributes, setAttributes}) => {

				const {
					skaBlocksVariables = {},
				} = attributes

				const {
					record = {},
				} = skaBlocksVariables

				return (
					<VariablesUI
						key={`variables-${presetId}`}
						record={record}
						onChange={record => setAttributes({skaBlocksVariables: {...skaBlocksVariables, record}})}
					/>
				)
			}}
		</Fill>
		<Fill name='ska.blocks.InspectorControls.selector.before'>
			{({selector, attributes, setAttributes}) => {

				const {
					skaBlocksVariables = {},
				} = attributes

				const {
					record = {},
				} = skaBlocksVariables

				return (
					<VariablesUI
						key={`variables-${selector}`}
						record={record}
						onChange={record => setAttributes({skaBlocksVariables: {...skaBlocksVariables, record}})}
					/>
				)
			}}
		</Fill>
	</>
}

export default VariablesInspectorControls