<link rel="import" href="../../../third-party/polymer/polymer.html">
<link rel="import" href="../../../third-party/paper-checkbox/paper-checkbox.html">

<polymer-element name="p2b-plugin-console">
  <template>
    <link rel="stylesheet" href="component.css">
    <link rel="stylesheet" href="../../../libs/css/common-style.css">
    <div title="Auto Scroll" class="auto-scroll {{ {hidden : !scrolling} | tokenList}}">
      <paper-checkbox checked="{{autoScroll}}" label="Auto Scroll" id="autoscroll"></paper-checkbox>
    </div>
    <pre id="console"></pre>
  </template>
  <script>
    Polymer('p2b-plugin-console', {
      ready: function() {
        this.textBuffer = [];
        this.autoScroll = true;
      },

      attached: function() {
        this.renderLoop();
      },
      detached: function() {
        this.isDetached = true;
      },
      renderLoop: function() {
        var self = this;
        if (!this.isDetached) {
          requestAnimationFrame(function() {
            self.render();
            self.renderLoop();
          });
        }
      },
      render: function() {
        if (this.textBuffer.length === 0) {
          return;
        }
        var textNode = document.createTextNode(this.textBuffer.join(''));
        this.textBuffer = [];
        this.$.console.appendChild(textNode);
        var scrollTop = this.scrollTop;
        this.scrolling =  scrollTop > 0;
        if (this.autoScroll) {
          this.scrollTop = this.scrollHeight;
        }
      },
      /*
       * Appends text to the console
       * @param {string} text Text to add
       */
      addText: function(text) {
        this.textBuffer.push(text);
      }
    });
    </script>
</polymer-element>