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

<polymer-element name="p2b-pipes-tab-toolbar">
  <template>
    <link rel="stylesheet" href="component.css">
    <core-toolbar>
      <span flex>
        {{ toolbarTitle }}
      </span>
      <span id="customActions"></span>
      <paper-icon-button id="fullscreenIcon" icon="fullscreen" on-click="{{ fireFullscreenAction }}"></paper-icon-button>
      <paper-icon-button icon="close" on-click="{{ fireCloseAction }}"></paper-icon-button>
    </core-toolbar>
  </template>
  <script>
    Polymer('p2b-pipes-tab-toolbar', {

      /*
       * Title of the toolbar
       * @type {string}
       */
      toolbarTitle: '',

      /*
       * Event that's fired when close action of the toolbar is triggered
       * @event
       */
      fireCloseAction: function() {
        this.fire('close-action');
      },

      /*
       * Event that's fired when fullscreen action of the toolbar is triggered
       * @event
       */
      fireFullscreenAction: function() {
        this.fire('fullscreen-action');
      },

      /*
       * Adds a new action to the toolbar
       * @param icon {string} icon Icon for the action
       * @param onClick {function} event handler for the action
       */
      add: function(icon, onClick) {
        var button = document.createElement('paper-icon-button');
        button.icon = icon;
        button.addEventListener('click', onClick);
        this.$.customActions.appendChild(button);
      }
    });
  </script>
</polymer-element>