<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>

<?php $_divId = 'tree' . $block->getId() ?>
<div id="<?= $block->escapeHtmlAttr($_divId) ?>" class="tree"></div>
<!--[if IE]>
<script id="ie-deferred-loader" defer="defer" src="//:"></script>
<![endif]-->
<?php
$isUseMassaction = $block->getUseMassaction() ? 1 : 0;
$isAnchorOnly = $block->getIsAnchorOnly() ? 1 : 0;
$intCategoryId = (int)$block->getCategoryId();
$intRootId = (int) $block->getRoot()->getId();
$scriptString = <<<script

require(['jquery', 'prototype', 'extjs/ext-tree-checkbox'], function(jQuery){

var tree{$block->escapeJs($block->getId())};

var useMassaction = {$isUseMassaction};

var isAnchorOnly = {$isAnchorOnly};

Ext.tree.TreePanel.Enhanced = function(el, config)
{
    Ext.tree.TreePanel.Enhanced.superclass.constructor.call(this, el, config);
};

Ext.extend(Ext.tree.TreePanel.Enhanced, Ext.tree.TreePanel, {

    loadTree : function(config, firstLoad)
    {
        var parameters = config['parameters'];
        var data = config['data'];

        if ((typeof parameters['root_visible']) != 'undefined') {
            this.rootVisible = parameters['root_visible']*1;
        }

        var root = new Ext.tree.TreeNode(parameters);

        this.nodeHash = {};
        this.setRootNode(root);

        if (firstLoad) {

script;
if ($block->getNodeClickListener()):
    $scriptString .= 'this.addListener(\'click\', ' . /* @noEscape */ $block->getNodeClickListener() .
    '.createDelegate(this));' . PHP_EOL;
endif;
$scriptString .= <<<script
        }

        this.loader.buildCategoryTree(root, data);
        this.el.dom.innerHTML = '';
        // render the tree
        this.render();
    }
});

jQuery(function()
{

script;
    $scriptString .= 'var emptyNodeAdded = ' . ($block->getWithEmptyNode() ? 'false' : 'true') . ';' . PHP_EOL;

$scriptString .= <<<script

    var categoryLoader = new Ext.tree.TreeLoader({
       dataUrl: '{$block->escapeJs($block->escapeUrl($block->getLoadTreeUrl()))}'
    });

    categoryLoader.processResponse = function (response, parent, callback) {
        var config = JSON.parse(response.responseText);

        this.buildCategoryTree(parent, config);

        if (typeof callback == "function") {
            callback(this, parent);
        }
    };

    categoryLoader.buildCategoryTree = function(parent, config)
    {
        if (!config) return null;


        if (parent && config && config.length){
            for (var i = 0; i < config.length; i++) {
                var node;
                if (useMassaction && config[i].is_anchor == isAnchorOnly) {
                    config[i].uiProvider = Ext.tree.CheckboxNodeUI;
                }
                var _node = Object.clone(config[i]);

                // Add empty node to reset category filter
                if(!emptyNodeAdded) {
                    var empty = Object.clone(_node);
                    empty.text = '{$block->escapeJs(__('None'))}';
                    empty.children = [];
                    empty.id = 'none';
                    empty.path = '1/none';
                    empty.cls = 'leaf';
                    parent.appendChild(new Ext.tree.TreeNode(empty));
                    emptyNodeAdded = true;
                }

                if (_node.children && !_node.children.length) {
                    delete(_node.children);
                    node = new Ext.tree.AsyncTreeNode(_node);
                } else {
                    node = new Ext.tree.TreeNode(config[i]);
                }
                parent.appendChild(node);
                node.loader = node.getOwnerTree().loader;
                node.loader = node.getOwnerTree().loader;
                if (_node.children) {
                    this.buildCategoryTree(node, _node.children);
                }
            }
        }
    };

    categoryLoader.createNode = function(config) {
        var node;
        if (useMassaction && config.is_anchor == isAnchorOnly) {
            config.uiProvider = Ext.tree.CheckboxNodeUI;
        }
        var _node = Object.clone(config);
        if (config.children && !config.children.length) {
            delete(config.children);
            node = new Ext.tree.AsyncTreeNode(config);
        } else {
            node = new Ext.tree.TreeNode(config);
        }
        return node;
    };

    categoryLoader.buildHash = function(node)
    {
        var hash = {};

        hash = this.toArray(node.attributes);

        if (node.childNodes.length>0 || (node.loaded==false && node.loading==false)) {
            hash['children'] = new Array;

            for (var i = 0, len = node.childNodes.length; i < len; i++) {
                if (!hash['children']) {
                    hash['children'] = new Array;
                }
                hash['children'].push(this.buildHash(node.childNodes[i]));
            }
        }

        return hash;
    };

    categoryLoader.toArray = function(attributes) {
        var data = {};
        for (var key in attributes) {
            var value = attributes[key];
            data[key] = value;
        }

        return data;
    };

    categoryLoader.on("beforeload", function(treeLoader, node) {
        treeLoader.baseParams.id = node.attributes.id;
        treeLoader.baseParams.store = node.attributes.store;
        treeLoader.baseParams.form_key = FORM_KEY;
        $('{$block->escapeJs($_divId)}').fire('category:beforeLoad', {treeLoader:treeLoader});
    });

    tree{$block->escapeJs($block->getId())} = new Ext.tree.TreePanel.Enhanced('{$block->escapeJs($_divId)}', {
        animate:          false,
        loader:           categoryLoader,
        enableDD:         false,
        containerScroll:  true,
        rootVisible:      false,
        useAjax:          true,
        currentNodeId:    {$intCategoryId},
        addNodeTo:        false
    });

    if (useMassaction) {
        tree{$block->escapeJs($block->getId())}.on('check', function(node) {
            $('{$block->escapeJs($_divId)}').fire('node:changed', {node:node});
        }, tree{$block->escapeJs($block->getId())});
    }

    // set the root node
    var parameters = {
        text:        'Psw',
        draggable:   false,
        id:          {$intRootId},
        expanded:    true,
        category_id: {$intCategoryId}
    };

    tree{$block->escapeJs($block->getId())}.loadTree({parameters:parameters, data:{$block->getTreeJson()}},true);

});

});
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
