import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
import { Panel } from '@wordpress/components';
import { BlockInspector } from '@wordpress/block-editor';
import { drawerRight } from '@wordpress/icons';

import { scope } from './constants';
const SIDEBARS_BLOCK = 'tipus/block';

export default function Sidebar () {
		const { enableComplementaryArea } = useDispatch( interfaceStore );
		useEffect(() => {
				enableComplementaryArea( scope, SIDEBARS_BLOCK );
		}, []);

		return (
				<ComplementaryArea
						scope={ scope }
						identifier={ SIDEBARS_BLOCK }
						isActiveByDefault={ true }
						icon={ drawerRight }
				>
						<Panel>
								<BlockInspector />
						</Panel>
				</ComplementaryArea>
		);
}