import { useState } from '@wordpress/element';
import { useStateWithHistory } from '@wordpress/compose';
import { BlockEditorProvider } from '@wordpress/block-editor';

import BlockEditor from './BlockEditor';

import './editor.scss';

export default function Editor() {
		const { value, setValue, hasUndo, hasRedo, undo, redo } = useStateWithHistory( { blocks: [] } );
		const [ blocks, updateBlocks ] = useState([]);

		return (
				<BlockEditorProvider
						value={ value.blocks }
						onInput={ ( blocks, { selection }) => setValue( { blocks, selection }, true ) }
						onChange={ ( blocks, {selection}) => setValue( { blocks, selection }, false ) }
				>
						<BlockEditor
								hasUndo={ hasUndo }
								undo={ undo }
								hasRedo={ hasRedo }
								redo={ redo }
						/>
				</BlockEditorProvider>
		);
}
