import { floatWholeBlockNonTextBoard, createFloatingIcons } from '../../utils';
import allowedBlocks from "../../component/compatibility/allowedBlocks"; 
const { useEffect, useState } = wp.element;

const { useSelect, select, dispatch } = wp.data;

const floatNonTextBoard = () => {
    const [clickedElement, setClickedElement] = useState(null);
    const [isSelect, setIsSelectClickedElement] = useState(null);

    useEffect(() => {
        const handleEvent = (event) => {
            const selectors = [
                '.commentIcon',
                '.non-core-block',
                '.cf-icon-wholeblock__comment',
                '.cf-icon__addBlocks',
                '.cf-icon__removeBlocks',
                '[align_sg_ids]:not(.commentIcon)',
                '[textAlign_sg_id]:not(.commentIcon)',
                '[lock_sg_id]:not(.commentIcon)',
                '[url_sg_id]:not(.commentIcon)',
                '[link_sg_id]:not(.commentIcon)',
                '[width_sg_id]:not(.commentIcon)',
                '[style_sg_id]:not(.commentIcon)',
                '[tracks_sg_id]:not(.commentIcon)',
                '[contentposition_sg_id]:not(.commentIcon)',
                '[minheight_sg_id]:not(.commentIcon)',
                '.wp-block-table__cell-content'
            ];

            const matchResult = selectors.reduce((result, selector) => {
                if (result.isMatch) return result; // If already matched, skip further checks
                const isMatch = event.target.matches(selector) || event.target.closest(selector);
                return isMatch ? { isMatch: true, matchedSelector: selector } : result;
            }, { isMatch: false, matchedSelector: null });

            // Destructure the result
            const { isMatch, matchedSelector } = matchResult;

            if (isMatch) {
                // Call your function with the matched selector
                floatWholeBlockNonTextBoard(event, matchedSelector);
                
                // Update state to track the clicked element
                setClickedElement(matchedSelector);
            }

            if (event.target.matches('.is-selected') || event.target.closest('.is-selected')) {
                // Your event handler logic here
                if ('0' === multicollab_floating_icons.cf_hide_floating_icons) {
                    const focusedElement = document.activeElement.localName;
                    const html = getSelectionHtml();

                    const selection = window.getSelection();
                    const selectedText = selection.toString();
                    const selectedTextLength = selectedText.length;
                    const selectedBlock = select("core/block-editor").getSelectedBlock();
                    if(selectedTextLength){
                        if (document.querySelectorAll('.cf-floating-wrapper').length < 1) {
                            var prefix = 'core/';
                            if (
                                ( null !== selectedBlock ) &&
                                selectedBlock?.name !== 'core/freeform'
                                && selectedBlock?.name.startsWith(prefix)
                            ) {
                                createFloatingIcons(focusedElement);
                            }
                        }
                    } else {
                        removeFloatingIcon();
                    }
                    
                  }
                setIsSelectClickedElement(event.target.className);
            }
        };

        // Attach the event listener to the document
        document.addEventListener('click', handleEvent);
        document.addEventListener('keydown', handleEvent);

        // Cleanup event listener on unmount
        return () => {
            document.removeEventListener('click', handleEvent);
            document.removeEventListener('keydown', handleEvent);
        };
    }, [clickedElement, isSelect]); // Dependency array includes clickedElement

    return null; // This component does not render anything
};

export default floatNonTextBoard;