/**
 * @file
 * Hierarchy Manager jsTree JavaScript file.
 */

// Codes run both on normal page loads and when data is loaded by AJAX (or BigPipe!)
// @See https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview
(function($, Drupal) {
  Drupal.behaviors.hmJSTree = {
    attach: function(context, settings) {
      $(".hm-jstree", context)
        .once("jstreeBehavior")
        .each(function() {
          const treeContainer = $(this);
          const parentID = treeContainer.attr('parent-id');
          const searchTextID = (parentID) ? '#hm-jstree-search-' + parentID : '#hm-jstree-search';
          const theme = treeContainer.attr("theme");
          const dots = treeContainer.attr("dots");
          const dataURL = treeContainer.attr('data-source') + '&parent=0';
          const updateURL = treeContainer.attr('url-update')
          let reload = true;
          let rollback = false;
          // Ajax callback to refresh the tree.
          if (reload) {
            // Build the tree.
            treeContainer.jstree({
              core: {
                data: {
                  url: function(node) {
                    return node.id === '#' ?
                        dataURL :
                        dataURL;
                  },
                  data: function(node) {
                    return node;
                  }
                },
                themes: {
                  // Todo: make configurable.
                  dots: dots === "1",
                  name: theme
                },
                'check_callback' : true,
                "multiple": false,
              },
              search: {
                show_only_matches: true
              },
              plugins: ["search", "dnd"]
            });
            
           // Node move event.
            treeContainer.on("move_node.jstree", function(event, data) {
              const thisTree = data.instance;
              const movedNode = data.node;
              
              if (!rollback) {            
                // Update the data on server side.
                $.post(updateURL, {
                  keys: [movedNode.id],
                  target: data.position,
                  parent: data.parent
                })
                  .done(function(response) {
                    if (response.result !== "success") {
                      alert("Server error:" + response.result);
                      rollback = true;
                      thisTree.move_node(movedNode, data.old_parent, data.old_position);
                    }
                  })
                  .fail(function() {
                    alert("Error: Can't connect to the server.");
                    rollback = true;
                    thisTree.move_node(movedNode, data.old_parent, data.old_position);
                  }); 
              }
              else {
                rollback = false;
              }
            });
            
         // Node selected event.
            treeContainer.on("select_node.jstree", function(event, data) {
              var href = data.node.a_attr.href;
              // Todo: make the target of the new window configurable.
              window.open(href, "_self");
            });

            // Search filter box.
            let to = false;
            $(searchTextID).keyup(function() {
              const searchInput = $(this);
              if (to) {
                clearTimeout(to);
              }
              to = setTimeout(function() {
                const v = searchInput.val();
                treeContainer.jstree(true).search(v);
              }, 250);
            });
          }
        });
    }
  };
})(jQuery, Drupal);