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 {
	SelectorScreens,
	MoveToParentMenuItem,
	SelectorNav,
	SelectorOptions,
} from '.'

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

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

	const {
		setAttributes,
	} = useSkaBlocksDispatch(attributes, setBlockAttributes)

	return <>
		<Fill name='ska.blocks.InspectorControls.head'>
			<SelectorNav
				attributes={attributes}
				setAttributes={setAttributes}
			/>
			<SelectorOptions
				attributes={attributes}
				setAttributes={setAttributes}
			/>
		</Fill>
		<Fill name='ska.blocks.InspectorControls.preset.head'>
			{({attributes, setAttributes}) => <>
				<SelectorNav
					attributes={attributes}
					setAttributes={setAttributes}
				/>
			</>}
		</Fill>
		<Fill name='ska.blocks.InspectorControls.screens'>
			<SelectorScreens
				attributes={attributes}
				setAttributes={setAttributes}
			/>
		</Fill>
		<Fill name='ska.blocks.InspectorControls.preset.screens'>
			{({attributes, setAttributes}) => <>
				<SelectorScreens
					attributes={attributes}
					setAttributes={setAttributes}
				/>
			</>}
		</Fill>
		<Fill name='ska.blocks.InspectorControls.actions.reset'>
			{({onClose}) => (
				<MoveToParentMenuItem
					clientId={clientId}
					attributes={attributes}
					setAttributes={setAttributes}
					onClose={onClose}
				/>
			)}
		</Fill>
	</>
}

export default SelectorsInspectorControls