<!DOCTYPE html>
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/base/base.html">
<link rel="import" href="/base/ui/table.html">
<link rel="import" href="/base/units/time_duration_span.html">
<link rel="import" href="/base/units/time_stamp_span.html">

<polymer-element name='tr-c-a-selection-summary-table'>
  <template>
    <style>
    :host {
      display: flex;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
    }
    </style>
    <tr-b-ui-table id="table">
    </tr-b-ui-table>
    </div>
  </template>
  <script>
  'use strict';

  Polymer({
    created: function() {
      this.selection_ = new tr.b.Range();
    },

    ready: function() {
      this.$.table.showHeader = false;
      this.$.table.tableColumns = [
        {
          title: 'Name',
          value: function(row) { return row.title; },
          width: '350px'
        },
        {
          title: 'Value',
          width: '100%',
          value: function(row) {
            return row.value;
          }
        }
      ];
    },

    get selection() {
      return this.selection_;
    },

    set selection(selection) {
      this.selection_ = selection;
      this.updateContents_();
    },

    updateContents_: function() {
      var selection = this.selection_;
      var rows = [];
      var hasRange;
      if (this.selection_ && (!selection.bounds.isEmpty))
        hasRange = true;
      else
        hasRange = false;

      rows.push({
        title: 'Selection start',
        value: hasRange ?
            tr.b.units.createTimeStampSpan(selection.bounds.min) : '<empty>'
      });
      rows.push({
        title: 'Selection extent',
        value: hasRange ?
            tr.b.units.createTimeSpan(selection.bounds.range) : '<empty>'
      });

      this.$.table.tableRows = rows;
      this.$.table.rebuild();
    }
  });
  </script>
</polymer-element>