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';

// Wichtig: CSS für den Editor, damit er korrekt aussieht
// import '@wordpress/components/build-style/style.css';
// import '@wordpress/block-editor/build-style/style.css';
// import '@wordpress/block-library/build-style/style.css';

// Registriere die Standard-Blöcke einmalig
registerCoreBlocks();

const GutenbergEditor = ({ value, onChange }) => {
	// Interner Zustand für die Block-Struktur
	const [blocks, setBlocks] = useState([]);
	const [isLoading, setIsLoading] = useState(true);

	// Dieser Effekt parst den eingehenden HTML-String in Blöcke
	useEffect(() => {
		setIsLoading(true);
		try {
			const parsedBlocks = parse(value || '');
			setBlocks(parsedBlocks);
		} catch (error) {
			console.error('Error parsing Gutenberg content:', error);
			setBlocks([]); // Fallback
		}
		setIsLoading(false);
	}, [value]); // Läuft nur, wenn sich der `value`-Prop ändert

	// Dieser Effekt serialisiert die Blöcke bei Änderung zurück in einen String
	useEffect(() => {
		// Wir wollen nicht beim initialen Parsen sofort wieder speichern
		if (!isLoading) {
			onChange(serialize(blocks));
		}
	}, [blocks]); // Läuft nur, wenn sich der `blocks`-State ändert

	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 />      {/* Der (+)-Button zum Hinzufügen von Blöcken */}
							<BlockTools />    {/* Enthält u.a. die schwebende Block-Toolbar */}
						</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 /> {/* Die rechte Einstellungs-Seitenleiste */}
							</div>
						</div>

						{/* Wichtig: Rendert alle Popups, Menüs etc. an der richtigen Stelle */}
						<Popover.Slot />

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

export default GutenbergEditor;