import { useState, useEffect } from '@wordpress/element';
import {
	BlockEditorProvider,
	BlockList,
	WritingFlow,
	ObserveTyping,
	BlockTools,
	BlockInspector,
	Inserter,
} from '@wordpress/block-editor';
import { parse, serialize } from '@wordpress/blocks';
import { registerCoreBlocks } from '@wordpress/block-library';
import { SlotFillProvider, DropZoneProvider, Popover, Spinner } from '@wordpress/components';

// CSS for the editor
// import '@wordpress/components/build-style/style.css';
// import '@wordpress/block-editor/build-style/style.css';
// import '@wordpress/block-library/build-style/style.css';

registerCoreBlocks();

const GutenbergEditor = ({ value, onChange }) => {
	const [blocks, setBlocks] = useState([]);
	const [isLoading, setIsLoading] = useState(true);

	useEffect(() => {
		setIsLoading(true);
		try {
			const parsedBlocks = parse(value || '');
			setBlocks(parsedBlocks);
		} catch (error) {
			console.error('Error parsing Gutenberg content:', error);
			setBlocks([]); // Fallback
		}
		setIsLoading(false);
	}, [value]);

	useEffect(() => {
		if (!isLoading) {
			onChange(serialize(blocks));
		}
	}, [blocks]);

	if (isLoading) {
		return <Spinner />;
	}

	return (
		<div className="adpresso-gutenberg-editor">
			<SlotFillProvider>
				<DropZoneProvider>
					<BlockEditorProvider
						value={blocks}
						onChange={setBlocks}
						settings={{
							__experimentalFeatures: true,
							// Weitere Settings nach Bedarf...
						}}
					>
						<div className="adpresso-editor-header">
							<Inserter />
							<BlockTools />
						</div>

						<div className="adpresso-editor-body">
							<div className="adpresso-editor-content">
								<WritingFlow>
									<ObserveTyping>
										<BlockList className="adpresso-gutenberg-blocklist" />
									</ObserveTyping>
								</WritingFlow>
							</div>

							<div className="adpresso-editor-sidebar">
								<BlockInspector />
							</div>
						</div>

						<Popover.Slot />

					</BlockEditorProvider>
				</DropZoneProvider>
			</SlotFillProvider>
		</div>
	);
};

export default GutenbergEditor;