import { InterfaceSkeleton, FullscreenMode, ComplementaryArea } from '@wordpress/interface';
import { BlockBreadcrumb, BlockCanvas, store as blockEditorStore } from '@wordpress/block-editor';

import Header from './Header';
import Sidebar from './Sidebar';
import { scope } from './constants';

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 BlockEditor() {
		const styles = [
				{ css: componentsStyle },
				{ css: blockLibraryCommon },
				{ css: blockLibraryStyle },
				{ css: blockLibraryEditor },
				{ css: formatLibraryStyle },
		];

		return (
				<>
						<FullscreenMode isActive={ true } />
						<Sidebar />
						<InterfaceSkeleton
								header={ <Header /> }
								content={ <BlockCanvas height="100%" styles={styles} /> }
								sidebar={ <ComplementaryArea.Slot scope={ scope } /> }
								footer={ <BlockBreadcrumb /> }
						/>
				</>
		);
}