<sky>
<import src="../resources/runner.sky" as="PerfRunner" />
<script>
var sky = document.querySelector("sky");

var widgets = 0;
var basicElements = 0;
var texts = 0;

var WidgetPrototype = Object.create(HTMLElement.prototype);
WidgetPrototype.createdCallback =  function() {
  widgets++;
  this.wasCreated = true;
  this.wasAttached = false;
  this.wasDetached = false;
  this.attrsChanged = [];
  this.createShadowRoot();
};

WidgetPrototype.attachedCallback = function() {
  this.wasAttached = true;
};

WidgetPrototype.detachedCallback = function() {
  this.wasDetached = true;
};

WidgetPrototype.attributeChangedCallback = function(name, oldValue, newValue) {
  this.attrsChanged.push({
    name: name,
    oldValue: oldValue,
    newValue: newValue,
  });
};

var Widget = document.registerElement("x-widget", {
  prototype: WidgetPrototype,
});

function createElement(tagName) {
  basicElements++;
  return document.createElement(tagName);
}

function createText(text) {
  texts++;
  return document.createTextNode(text);
}

function createElements(root, depth) {
  for (var i = 0; i < 4; i++) {
    var div = createElement("div");
    var span1 = div.appendChild(createElement("span"));
    span1.appendChild(createText("foo"));
    span1.setAttribute("id", "span" + (i * depth));
    div.appendChild(createText(" "));
    div.setAttribute("class", "b" + i + " a" + i);
    var span2 = div.appendChild(createElement("span"));
    span2.appendChild(createText("bar"));
    var widget = span2.appendChild(new Widget());
    widget.setAttribute("id", "widget-" + (i * depth));
    widget.setAttribute("custom", "example attribute");
    widget.setAttribute("custom2", "example attribute2");
    root.appendChild(div);
    if (depth)
      createElements(widget.shadowRoot, depth - 1);
  }
}

var runner = new PerfRunner({
  setup: function() {
    widgets = 0;
    basicElements = 0;
    texts = 0;
  },
  iterations: 10,
  unit: "ms",
});

runner.runAsync(function(done) {
  var root = createElement("div");
  sky.appendChild(root);
  createElements(root, 3);
  root.remove();
  // console.log("widgets: " + widgets);
  // console.log("basic elements: " + basicElements);
  // console.log("texts: " + texts);
  // CONSOLE: LOG: widgets: 340
  // CONSOLE: LOG: basic elements: 1021
  // CONSOLE: LOG: texts: 1020
  done();
});
</script>
</sky>