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

import * as React from 'react';
import { useRaonkEditor } from 'raonkeditor-react';

const { useState } = React;

/**
 * Pass `dispatch` from `useReducer` in order to listen to component's events and derive state of your components as needed.
 */
function RaonkEditorCmp( { config, debug, mode, readOnly, runtimes, componentUrl, id, dispatchEvent } ) {
	const [ element, setElement ] = useState();

	/**
	 * Sets initial value of `readOnly`.
	 */
	 if ( config && readOnly ) {
		config.ReadOnly = readOnly;
	}

	/**
	 * Sets initial value of `readOnly`.
	 */
	if ( config && mode ) {
		config.Mode = mode;
	}

	useRaonkEditor( {
		debug,
		element,
		config,
		componentUrl,
		runtimes,
		
		dispatchEvent,
		subscribeTo: [
			// Subscribed default events
			'namespaceLoaded',
			'beforeLoad',
			'loaded',
			'creationComplete',
			'destroy'
		]
	} );

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

export default RaonkEditorCmp;