(function(window) {
  "use strict";

  window.ls.container.get("view").add({
    selector: "data-forms-clone",
    controller: function(element, document, view) {
      var template = element.innerHTML.toString();
      var label = element.dataset["label"] || "Add";
      var icon = element.dataset["icon"] || null;
      var target = element.dataset["target"] || null;
      var first = parseInt(element.dataset["first"] || 1);
      var button = document.createElement("button");

      button.type = "button";
      button.innerText = " " + label + " ";
      button.classList.add("margin-end");
      button.classList.add("margin-bottom-small");
      button.classList.add("reverse");

      if (icon) {
        var iconElement = document.createElement("i");
        iconElement.className = icon;

        button.insertBefore(iconElement, button.firstChild);
      }

      if (target) {
        target = document.getElementById(target);
      }

      button.addEventListener("click", function() {
        var clone = document.createElement(element.tagName);

        if (element.name) {
          clone.name = element.name;
        }

        clone.innerHTML = template;
        clone.className = element.className;

        view.render(clone);

        if (target) {
          target.appendChild(clone);
        } else {
          button.parentNode.insertBefore(clone, button);
        }

        clone.querySelector("input").focus();

        Array.prototype.slice
          .call(clone.querySelectorAll("[data-remove]"))
          .map(function(obj) {
            obj.addEventListener("click", function() {
              clone.parentNode.removeChild(clone);
              obj.scrollIntoView({ behavior: "smooth" });
            });
          });

        Array.prototype.slice
          .call(clone.querySelectorAll("[data-up]"))
          .map(function(obj) {
            obj.addEventListener("click", function() {
              if (clone.previousElementSibling) {
                clone.parentNode.insertBefore(
                  clone,
                  clone.previousElementSibling
                );
                obj.scrollIntoView({ behavior: "smooth" });
              }
            });
          });

        Array.prototype.slice
          .call(clone.querySelectorAll("[data-down]"))
          .map(function(obj) {
            obj.addEventListener("click", function() {
              if (clone.nextElementSibling) {
                clone.parentNode.insertBefore(clone.nextElementSibling, clone);
                obj.scrollIntoView({ behavior: "smooth" });
              }
            });
          });
      });

      element.parentNode.insertBefore(button, element.nextSibling);

      element.parentNode.removeChild(element);

      if (first) {
        button.click();
      }
    }
  });
})(window);