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 },
									 ],
									 __experimentalFeatures: {
											 typography: {
													 defaultFontSizes: true,
													 dropCap: true,
													 fontSizes: {
															 default: [
																	 {
																			 name: "Small",
																			 slug: "small",
																			 size: "13px",
																	 },
																	 {
																			 name: "Medium",
																			 slug: "medium",
																			 size: "20px",
																	 },
																	 {
																			 name: "Large",
																			 slug: "large",
																			 size: "36px",
																	 },
																	 {
																			 name: "Extra Large",
																			 slug: "x-large",
																			 size: "42px",
																	 },
															 ],
													 },
													 customFontSize: true,
													 fontStyle: true,
													 fontWeight: true,
													 letterSpacing: true,
													 textAlign: true,
													 textColumns: false,
													 textDecoration: true,
													 textTransform: true,
													 writingMode: false,
											 },
									 },
							 } }
					 >
							 <BlockEditor/>
					 </BlockEditorProvider>;
}
