/**
 * Create callback
 * @callback createElementCallback
 * @param {element} shaddow the shadow dom element
 * @param {scope} this the scope of the custom element
 */

/**
 * Generates a new component
 * @param {string} elementName Name of JavaScript Class for the element
 * @param {string} tagName Name of the tag produced (Must contain at least one '-')
 * @param {string} templateSelector Selector to template for the contents of the shadow DOM
 * @param {createElementCallback} postCreateCallback Callback triggered on construction of the element
 */
function generateComponent(elementName, tagName, templateSelector, postCreateCallback) {

  //Create a custom element that extends from the base HTMLElement
  var elementPrototype = Object.create(HTMLElement.prototype);

  //On creation of an element this code triggers
  //Defines a shadow root within our custom element
  //Imports in the matching template
  //Triggers the callback for any further customisation
  elementPrototype.createdCallback = function() {
    var shadow = this.createShadowRoot();
    var template = document.querySelector(templateSelector);
    var clone = document.importNode(template.content, true);
    shadow.appendChild(clone);
    if (postCreateCallback) { postCreateCallback(shadow, this); }
  };

  //Register the element name to the window
  window[elementName] = document.registerElement(tagName, {prototype: elementPrototype});
}

function slugify(slug) {
  return slug.toLowerCase().replace(/\s/g,'-');
}

generateComponent('MyBlockElement', 'my-block', '#myblocktemplate', function (shadow, scope) {
  var headingDOM = shadow.querySelector('my-heading');
  var heading = scope.getAttribute('heading');
  var icon = scope.getAttribute('heading-icon');
  if (headingDOM) {
    if (heading) {
      headingDOM.innerText = heading;
    } else {
      headingDOM.style.display = 'none';
    }
    if (icon) {
      headingDOM.setAttribute('icon', icon);
    }
  }
});

generateComponent('MyHeadingElement', 'my-heading', '#myheadingtemplate', function (shadow, scope) {
  var icon = scope.getAttribute('icon');
  var iconDOM = shadow.querySelector('i');
  var linkDOM = shadow.querySelector('a');
  if (icon && iconDOM) {
    iconDOM.classList.add(icon);
  }
  if (linkDOM && scope.innerText !== '') {
      linkDOM.setAttribute('href', '#' + slugify(scope.innerText));
  }
});