<link rel="import" href="../../../../../third-party/polymer/polymer.html">
<link rel="import" href="../../../../../third-party/paper-button/paper-button.html">
<polymer-element name="p2b-grid-column-renderer" extends="th" attributes="data gridState" expects-grid-state>
  <template>
    <link rel="stylesheet" href="renderer.css">
    <paper-button label="{{ formattedLabel }}" disabled?="{{!data.sortable}}" on-tap="{{ updateGridState }}"></paper-button>
  </template>
  <script>
   /*
    * @private
    */
    Polymer('p2b-grid-column-renderer', {
      'observe': {
        'data.flex' : 'updateWidth',
        'data.totalFlex' : 'updateWidth'
      },

      domReady: function() {
        this.updateWidth();
      },

      updateWidth: function() {
        // calculate the width value based on flex and total flex of the whole grid.
        this.style.width = (this.data.flex / this.data.totalFlex) * 100 + '%';
      },

      updateGridState:function() {
        if( !this.data.sortable ) {
          return;
        }
        this.gridState.sort.ascending = !this.gridState.sort.ascending;
        this.gridState.sort.key = this.data.key;
      },

      get formattedLabel() {
        if (!this.data.sortable || this.gridState.sort.key != this.data.key) {
          return this.data.label;
        }

        if (this.gridState.sort.ascending) {
          return this.data.label + ' \u21A5'; // up wedge unicode character
        } else {
          return this.data.label + ' \u21A7'; // down wedge unicode character
        }
      }
    });
  </script>
</polymer-element>