/* eslint-disable react/prop-types */

import * as React from 'react';
import { useDEXT5Editor } from 'dext5editor-react';

const { useEffect, useState } = React;

/**
 * Custom `DEXT5Editor` component built on top of `useDEXT5Editor` hook.
 */
function DEXT5Editor( { config, debug, readOnly, componentUrl, id } ) {
	const [ element, setElement ] = useState();

	const { component, status } = useDEXT5Editor( {
		debug,
		element,
		config,
		componentUrl
	} );

	/**
	 * Toggles `readOnly` on runtime.
	 */
	useEffect( () => {
		if ( component && status === 'ready' ) {
			debugger;
			( DEXT5.IsLoadedEditorEx( component.object.ID ) ) && ( DEXT5.SetReadOnly( readOnly, '', component.object.ID ) );
		}
	}, [ component, readOnly ] );

	return (
		<div
			id={id}
			ref={setElement}
		></div>
	);
}

export default DEXT5Editor;