<div id="menu-edit-container" class="category-content">
    <?php echo $block->getChildHtml('form') ?>
</div>
<script>
require([
    "jquery",
    "tinymce",
    "loadingPopup",
    "mage/backend/floating-header"
], function(jQuery, tinyMCE){

//<![CDATA[
    function menuReset(url,useAjax){
        if(useAjax){
            var params = {active_tab_id:false};
            updateContent(url, params);
        }else{
            location.href = url;
        }
    }

    /**
    * Delete some Menu
    * This routine get menuId explicitly, so even if currently selected tree node is out of sync
    * with this form, we surely delete same Menu in the tree and at backend
    */
    function menuDelete(url) {
        if (confirm('<?php echo __('Are you sure you want to delete this Menu?') ?>')){
            location.href = url;
        }
    }

    /**
     * Update Menu content area
     */
    function updateContent(url, params, refreshTree) {
        var node        = tree.getNodeById(tree.currentNodeId),
            parentNode  = node && node.parentNode,
            parentId,
            redirectUrl,
            params;

        params = jQuery.extend(params || {}, {
            form_key: FORM_KEY
        });

        if (params.node_name) {
            node.setText(params.node_name);
        }

        (function($){
            var $menuContainer = $('#menu-edit-container'),
                messagesContainer = $('.messages');
            messagesContainer.html('');
            $.ajax({
                url: url + (url.match(new RegExp('\\?')) ? '&isAjax=true' : '?isAjax=true' ),
                data: params,
                context: $('body'),
                showLoader: true
            }).done(function(data){
                if (data.content) {
                    var pageActions = $('.page-actions');
                    for (var i =0;i<pageActions.length;i++) {
                        if ($(pageActions[i]).data('floatingHeader')) {
                            $(pageActions[i]).floatingHeader('destroy');
                        }
                    }
                    try {
                        $('#menu-edit-container .wysiwyg-editor').each(function(index, element) {
                            tinyMCE.execCommand('mceRemoveControl', false, $(element).attr('id'));
                        });
                        $menuContainer.html('');
                    } catch (e) {
                        alert(e.message);
                    }
                    $menuContainer.html(data.content).trigger('contentUpdated');
                    setTimeout(function() {
                        $('#menu-edit-container .wysiwyg-editor').each(function(index, element) {
                            tinyMCE.execCommand('mceRemoveControl', false, $(element).attr('id'));
                            tinyMCE.execCommand('mceAddControl', true, $(element).attr('id'));
                        });
                        $('.page-actions').floatingHeader({
                            'title': '.menu-edit-title'
                        });
                        $('body').trigger('contentUpdated');
                        try {
                            if (refreshTree) {
                                window.refreshTreeArea();
                            }
                        } catch (e) {
                            alert(e.message);
                        };
                    }, 25);
                }

                if (data.messages && data.messages.length > 0) {
                    messagesContainer.html(data.messages);
                }
                if (data.toolbar) {
                    $('[data-ui-id="page-actions-toolbar-content-header"]').replaceWith(data.toolbar)
                }
            });
        })(jQuery);
    }

    /**
     * Refresh tree nodes after saving or deleting a category
     */
    function refreshTreeArea(transport)
    {
        var config,
            url;

        if (tree && window.editingMenuBreadcrumbs) {
            if (tree.nodeForDelete) {
                var node = tree.getNodeById(tree.nodeForDelete);
                tree.nodeForDelete = false;

                if (node) { // Check maybe tree became somehow not synced with ajax and we're trying to delete unknown node
                    node.parentNode.removeChild(node);
                    tree.currentNodeId = false;
                }
            }
            // category created - add its node
            else if (tree.addNodeTo) {
                var parent = tree.getNodeById(tree.addNodeTo);
                tree.addNodeTo = false;

                if (parent) { // Check maybe tree became somehow not synced with ajax and we're trying to add to unknown node
                    config = editingMenuBreadcrumbs[editingMenuBreadcrumbs.length - 1];

                    window.location.href = tree.buildUrl(config.id);
                }
            }

            // update all affected categories nodes names
            for (var i = 0; i < editingMenuBreadcrumbs.length; i++) {
                var node = tree.getNodeById(editingMenuBreadcrumbs[i].id);
                if (node) {
                    node.setText(editingMenuBreadcrumbs[i].text);
                }
            }
        }
    }

    function displayLoadingMask() {
        jQuery('body').loadingPopup();
    }

    window.refreshTreeArea = refreshTreeArea;
    window.updateContent = updateContent;
    window.menuDelete = menuDelete;
    window.menuReset = menuReset;
    window.displayLoadingMask = displayLoadingMask;
//]]>

});
</script>
