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

import BlockEditor from './BlockEditor';

import './editor.scss';

import blockLibraryCommon from '@wordpress/block-library/build-style/common.css?inline';
import blockLibraryEditor from '@wordpress/block-library/build-style/editor.css?inline';
import blockLibraryStyle from '@wordpress/block-library/build-style/style.css?inline';
import componentsStyle from '@wordpress/components/build-style/style.css?inline';
import formatLibraryStyle from '@wordpress/format-library/build-style/style.css?inline';

export default function Editor() {
		const [ blocks, updateBlocks ] = useState();

		return <BlockEditorProvider
							 value={ blocks }
							 onInput={ updateBlocks }
							 onChange={ updateBlocks }
							 settings={ {
									 styles: [
											 { css: componentsStyle },
											 { css: blockLibraryCommon },
											 { css: blockLibraryStyle },
											 { css: blockLibraryEditor },
											 { css: formatLibraryStyle },
									 ],
							 } }
					 >
							 <BlockEditor/>
					 </BlockEditorProvider>;
}