import React, {startTransition, useEffect, useRef} from 'react';
import {basicSetup, EditorView} from "codemirror"
import {placeholder} from "@codemirror/view";
import {css} from "@codemirror/lang-css"

const customTheme = EditorView.theme({
	'&': {
		height: '200px', // Set the desired height
		width: '600px',  // Set the desired width
		background: '#fff',
	},
	'.cm-scroller': {
		overflow: 'auto', // Enable scrolling within the editor
	},
});

type CssEditorProps = {
	value: string
	onChange: (val: string) => void;
}

const CssEditor = (props: CssEditorProps) => {

	const editorRef = useRef<HTMLDivElement>(null);
	const initialValue = useRef<string>(props.value);
	const onChangeRef = useRef(props.onChange);

	useEffect(() => {
		const element = editorRef.current as HTMLDivElement;

		const updateListener = EditorView.updateListener.of((update) => {
			if (update.docChanged) {
				const newCode = update.state.doc.toString();
				onChangeRef.current(newCode);
				startTransition(() => {
					document.querySelector('.woocommerce-save-button')?.removeAttribute('disabled');
				});
			}
		});

		const view = new EditorView({
			parent: element,
			doc: initialValue.current,
			extensions: [
				basicSetup,
				css(),
				customTheme,
				updateListener,
				placeholder('.hulk_woo_pcm_wrapper { background-color: orange }')
			],
		});

		// Focus the editor after initialization
		view.focus();

		// Cleanup function to destroy the editor instance when the component unmounts
		return () => {
			view.destroy();
		};
	}, []);

	return <div ref={editorRef}/>;
};

export default CssEditor;