'use strict';
(function () {
// [ html-demo ]
const main = document.querySelector('#tree-demo');
const info = document.querySelector('#tree-msg');

const tree = new VanillaTree(main, {
  contextmenu: [
    {
      label: 'Hey',
      action: function (id) {
        alert('Hey ' + id);
      }
    },
    {
      label: 'Blah',
      action: function (id) {
        alert('Blah ' + id);
      }
    }
  ]
});

tree.add({
  label: 'Label A',
  id: 'a',
  opened: true
});

tree.add({
  label: 'Label B',
  id: 'b'
});

tree.add({
  label: 'Label A.A',
  parent: 'a',
  id: 'a.a',
  opened: true,
  selected: true
});

tree.add({
  label: 'Label A.A.A',
  parent: 'a.a'
});

tree.add({
  label: 'Label A.A.B',
  parent: 'a.a'
});

tree.add({
  label: 'Label B.A',
  parent: 'b'
});

main.addEventListener('vtree-open', function (evt) {
  info.innerHTML = evt.detail.id + ' is opened';
});

main.addEventListener('vtree-close', function (evt) {
  info.innerHTML = evt.detail.id + ' is closed';
});

main.addEventListener('vtree-select', function (evt) {
  info.innerHTML = evt.detail.id + ' is selected';
});
})();