/**
 * WordPress dependencies
 */
const { createHigherOrderComponent, compose } = wp.compose;
const { useSelect, select } = wp.data; 
const { useState, useEffect } = wp.element; 

const updateEditor = createHigherOrderComponent(
	( BlockEdit ) => ( props ) => {
		/**
     * Handles the behavior of the editor mode and the presence of a comment container.
     * 
     * This effect is triggered when the editor mode changes. It checks if the editor mode is not in "text" mode, and if so, it performs the following actions:
     * 
     * 1. If the editor mode is not in "text" mode and there is no parent node board with the ID "cf-comments-suggestions-parent", it adds a new comment container.
     * 2. If the editor mode is in "template" mode and there is a parent node board with the ID "cf-comments-suggestions-parent", it removes the parent node board.
     */
    const isTemplate = select('core/editor').getCurrentPostType();
    const isEditingTemplate = isTemplate === 'wp_template';
    const editorMode = useSelect((select) => select('core/edit-post').getEditorMode());
		useEffect(() => {
			if (editorMode !== 'text') {
				const parentNodeBoard = document.getElementById('cf-comments-suggestions-parent');
				if(isEditingTemplate && parentNodeBoard){
					parentNodeBoard.remove();
				}
			}
		}, [editorMode, isEditingTemplate]); // Trigger effect when the editor mode changes

		return (
			<>
				<BlockEdit { ...props } />
			</>
		);
	},
	'updateEditor'
);
export default compose()(updateEditor);