import Board from '../board';
import React from 'react'
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import PropTypes from 'prop-types';
import allowedBlocks from '../../common/component/compatibility/allowedBlocks';
import Mdstore from '../../store/mdStore';
import ACFBlocks from '../../common/component/compatibility/acfBlocks';
import { openCommentBoardSidebar, positionFloatingElement, showNotice } from '../../common/utils';

import assign from "lodash.assign";
const { __ } = wp.i18n;                                                   // eslint-disable-line
const { getBlockType } = wp.data.select('core/blocks');                 // eslint-disable-line
const $ = jQuery;                                                       // eslint-disable-line
const ACFInstance = new ACFBlocks();
let isRichClassExist = document.activeElement.classList.contains('rich-text');     // eslint-disable-line   

let container = null;
export default class NonTextComments extends React.Component {
    constructor(props) {
        super(props);
        this.onToggleNonTextBlock = this.onToggleNonTextBlock.bind(this);

    }
    async onToggleNonTextBlock() {
        await openCommentBoardSidebar();
        var currentTime = Date.now();
        currentTime = 'el' + currentTime;
        var block = wp.data.select('core/block-editor').getSelectedBlock();
        var notAllowedBlocksAcf = ['acf/acfb-posts', 'acf/acfb-business-hours', 'acf/acfb-socialsharing'];
        var prefixAcf = 'acf/';
        const iframe = cfGetIframe();
        const iframeDocument = iframe ? iframe.contentWindow.document : null;
        if (block.name.startsWith(prefixAcf)) {
            var selection = window.getSelection();
            var selectedText = selection.toString();
            var wholeBlockComment = false;

            if (selectedText) {
                var range = selection.getRangeAt(0);
                var startContainer = range.startContainer;
                var endContainer = range.endContainer;

                // Get the distinct parent elements for the start and end containers
                var startParent = getParentElement(startContainer);
                var endParent = getParentElement(endContainer);

                var acfRestrictClass = ['acfb_price_list_price', 'acfb_progress_percentage', 'acfb_counter_number','acfb_pricing_box_price'];
                if (startParent) {
                    for (var i = 0; i < acfRestrictClass.length; i++) {
                        if (startParent.classList.contains(acfRestrictClass[i])) {
                            showNotice( __(
                                "Please Select a Text",
                                "commenting-feature"
                            ));
                            return;
                        }
                    }
                }

                // Check if there are different parent elements
                if (startParent !== endParent) {
                    wholeBlockComment = true;
                } else {
                    $(".toolbar-button-with-nontext").removeClass("is-pressed");
                }
            } else {
                wholeBlockComment = true;
            }

            // Function to find the nearest parent element of a node, excluding mdspan
            function getParentElement(node) {
                while (node && node.nodeType !== Node.ELEMENT_NODE) {
                    node = node.parentElement || node.parentNode;
                }
                while (node && (!node.classList || node.classList.length === 0)) {
                    node = node.parentElement || node.parentNode;
                }
                if (node && node.classList && node.classList.contains('mdspan-comment')) {
                    node = getParentElement(node.parentElement || node.parentNode);
                }
                return node;
            }

            if (wholeBlockComment) {
                var blockName = block.name;
                var blockType = getBlockType(blockName);
                var commentedOnText = this.getCommentedText(blockType.title, block);
                var blockIndex = block.clientId;
                var blockId = "block-" + blockIndex;
                var existingDatatext = wp.data.select('core/block-editor').getBlockAttributes(blockIndex).datatext;
                wp.data.dispatch('mdstore').setIsActive(true);
                //Restrict multiple comment on same block
                if (existingDatatext) {
                    showNotice( __(
                        "Multiple comments are not possible on the same block.",
                        "commenting-feature"
                    ), 'error');
                    return;
                }
                if ($("#cf-comment-board-wrapper").is(':empty')) {
                    $('body').addClass("commentOn");
                }
                if ($('body').hasClass('hide-comments')) {
                    $('body').removeClass('hide-comments');
                    // Toogle hide-comments class if the comments is hidden when try to add new one.
                    wp.data.dispatch("core/editor").editPost({
                        meta: { _sb_show_comment_boards: false },
                    });
                    $('body').addClass("commentOn");
                }
                if (false === wp.data.select('mdstore').getShowComments()) {
                    wp.data.dispatch('mdstore').setShowComments(true);
                    $('.comment-toggle .components-form-toggle').removeClass('is-checked');
                }

                $("#" + blockId).attr('datatext', currentTime);
                var newNode = document.createElement('div');
                newNode.setAttribute("id", currentTime);
                newNode.setAttribute("class", 'cls-board-outer draftComment cm-board');
                var referenceNode = document.getElementById('cf-comment-board-wrapper');
                if (null === referenceNode) {
                    createCommentNode();
                    referenceNode = document.getElementById('cf-comment-board-wrapper');

                }

                referenceNode.appendChild(newNode);
                if ('' !== commentedOnText) {

                    container = document.getElementById(currentTime);
                    const root = createRoot(container);
                    root.render(<Board datatext={currentTime} freshBoard={1} commentedOnText={commentedOnText} />);
                    
                } else {
                    referenceNode.removeChild(newNode);
                    var selectedBlock = __('Please select block/image to comment on.', 'commenting-feature');
                    alert(selectedBlock);
                    return;
                }

                wp.data.dispatch('core/block-editor').updateBlock(blockIndex, {
                    attributes: {
                        datatext: currentTime,
                    }
                });

            } else if (!notAllowedBlocksAcf.includes(block.name)) {

                if (selectedText.trim() === '') {
                    showNotice( __(
                        "Please Select a Text",
                        "commenting-feature"
                    ));
                    return;
                }

                if (selectedText.trim() !== '') {
                    var mdspanElement = selection.anchorNode.parentElement.closest('.mdspan-comment');
                    if (mdspanElement) {
                        var datatextValue = mdspanElement.getAttribute('datatext');
                    }
                }

                var activeDataText = datatextValue;

                if(activeDataText){
                    wp.data.dispatch('mdstore').setIsActive(true);
                }
                
                var openBoardDataText = $(".is-open").attr("id");
                if (
                    $(".cls-board-outer").hasClass("is-open") &&
                    activeDataText === openBoardDataText &&
                    undefined !== openBoardDataText
                ) {
                    showNotice( __(
                        "Multiple comments are not possible on the same block.",
                        "commenting-feature"
                    ), 'error');
                    return;
                }

                var html = getSelectionHtml();
                var already_commented = jQuery(".cf-floating-wrapper__btn ul li:first-child").attr("already_commented");
                if (null !== html.match(/mdspan/g) || "true" === already_commented) {
                    showNotice( __(
                        "Multiple comments are not possible on the same block.",
                        "commenting-feature"
                    ), 'error');
                    return;
                }

                var commentedOnText = window.getSelection().toString();
                var selection = window.getSelection().getRangeAt(0);
                var selectedText = selection.extractContents();
                var span = document.createElement("mdspan");
                span.setAttribute('datatext', currentTime);
                span.setAttribute('class', 'mdspan-comment non-core-block');
                span.appendChild(selectedText);
                selection.insertNode(span);
                var newNode = document.createElement('div');
                newNode.setAttribute("id", currentTime);
                newNode.setAttribute("class", 'cls-board-outer draftComment cm-board');
                var referenceNode = document.getElementById('cf-comment-board-wrapper');

                if (null === referenceNode) {
                    createCommentNode();
                    referenceNode = document.getElementById('cf-comment-board-wrapper');
                }

                referenceNode.appendChild(newNode);

                container = document.getElementById(currentTime);
                const root = createRoot(container);
                root.render(<Board datatext={currentTime} freshBoard={1} commentedOnText={commentedOnText} />);
                
                // Open the edit-block sidebar
                wp.data.dispatch('core/edit-post').openGeneralSidebar('edit-post/block');

                setTimeout(function () {
                    ACFInstance.acfBlocks(currentTime, block);
                }, 500);
            }
        } else {
            var blockName = block.name;
            var blockType = getBlockType(blockName);
            var commentedOnText = this.getCommentedText(blockType.title, block);
            var blockIndex = block.clientId;
            var blockId = "block-" + blockIndex;
            var existingDatatext = wp.data.select('core/block-editor').getBlockAttributes(blockIndex).datatext;
            wp.data.dispatch('mdstore').setIsActive(true);
            //Restrict multiple comment on same block
            if (existingDatatext) {
                showNotice( __(
                    "Multiple comments are not possible on the same block.",
                    "commenting-feature"
                ), 'error');
                return;
            }
            if ($("#cf-comment-board-wrapper").is(':empty')) {
                $('body').addClass("commentOn");
            }
            if ($('body').hasClass('hide-comments')) {
                $('body').removeClass('hide-comments');
                // Toogle hide-comments class if the comments is hidden when try to add new one.
                wp.data.dispatch("core/editor").editPost({
                    meta: { _sb_show_comment_boards: false },
                });
                $('body').addClass("commentOn");
            }
            if (false === wp.data.select('mdstore').getShowComments()) {
                wp.data.dispatch('mdstore').setShowComments(true);
                $('.comment-toggle .components-form-toggle').removeClass('is-checked');
            }

            $("#" + blockId).attr('datatext', currentTime);
            var newNode = document.createElement('div');
            newNode.setAttribute("id", currentTime);
            newNode.setAttribute("class", 'cls-board-outer draftComment cm-board');
            var referenceNode = document.getElementById('cf-comment-board-wrapper');
            if (null === referenceNode) {
                createCommentNode();
                referenceNode = document.getElementById('cf-comment-board-wrapper');

            }

            referenceNode.appendChild(newNode);
            if ('' !== commentedOnText) {

                container = document.getElementById(currentTime);
                const root = createRoot(container);
                root.render(<Board datatext={currentTime} freshBoard={1} commentedOnText={commentedOnText} />);

            } else {
                referenceNode.removeChild(newNode);
                var selectedBlock = __('Please select block/image to comment on.', 'commenting-feature');
                alert(selectedBlock);

                return;
            }
        }

        if ($('.cf-floating-wrapper').length > 1) {
            removeFloatingIcon();
        }

        $('#cf-comment-board-wrapper .cls-board-outer').removeClass('focus');
        $('#cf-comment-board-wrapper .cls-board-outer').removeClass('is-open');
        //$('#cf-comment-board-wrapper .cls-board-outer').css('opacity', '0.2');
        $('#cf-comment-board-wrapper .cls-board-outer').css('top', 0);
        $('#' + currentTime + '.cls-board-outer').addClass('focus');
        //$('#' + currentTime + '.cls-board-outer.focus').css('opacity', '1');
        $('#' + currentTime + '.cls-board-outer.focus').parent().addClass('cf-unset-all');
        let topOfWholeBoard;
        
            const elementOfBoard = document.getElementById(currentTime);
            const referenceElement = iframeDocument 
                    ? iframeDocument.getElementById('block-'+block.clientId) 
                        : document.getElementById('block-'+block.clientId); 
            topOfWholeBoard = referenceElement ? referenceElement.getBoundingClientRect().top + 50 : 0;
            if(elementOfBoard){
                $("#" + currentTime).offset({
                    top: topOfWholeBoard,
                });
            }
        

        $('#' + currentTime).addClass('has_text').show();
        $('#' + currentTime + '.cls-board-outer').addClass('is-open');
        $('#history-toggle').attr('data-count', $('.cls-board-outer').length);
        //Activate Show All comment button in setting panel
        $('.comment-toggle .components-form-toggle').removeClass('is-checked');

       if ( !block.name.startsWith( prefixAcf ) ) {
            wp.data.dispatch('core/block-editor').updateBlock(blockIndex, {
                attributes: {
                    datatext: currentTime,
                }
            });

        }
        wp.data.dispatch('mdstore').setDataText(currentTime);

    };

    getCommentedText(blockType, block) {
        var commentedOnText, url;
        //User can comment on whole block/@author Pooja Bhimani/@since 2.0.4.6
        if ((allowedBlocks.media).includes(block.name)) {

            if ('core/video' === block.name || 'core/audio' === block.name) {
                url = block.attributes.src;
            } else if ('core/media-text' == block.name) {
                url = block.attributes?.mediaUrl;
            } else if ('core/gallery' == block.name) {
                // Add condition to resolve whole gallery block comment issue.
                if (block.attributes.images.length > 0) {
                    url = block.attributes.images[0]?.url;
                } else {
                    return commentedOnText = [blockType, ' Block '].join('');
                }
            }
            else {
                url = block.attributes.url;
            }
            if (undefined !== url) {
                var srcText = url.split("/");
                commentedOnText = srcText[srcText.length - 1];

            } else {
                commentedOnText = '';
            }
            return commentedOnText;
        }
        else {
            var commentBlockName = block.name.replace(/[^a-zA-Z0-9]/g, ' ');
            if (!(allowedBlocks.text).includes(block.name)) {
                commentedOnText = [blockType, ' Block '].join('');
                [blockType, ' Block '].join('');
            }
            else {
                commentedOnText = [blockType, ' Block '].join('');

            }
            return commentedOnText;
        }

    }

}