<!DOCTYPE html>
<!--
Copyright 2015 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="/tracing/base/statistics.html">
<link rel="import" href="/tracing/model/event_set.html">
<link rel="import" href="/tracing/ui/base/table.html">
<link rel="import" href="/tracing/ui/side_panel/side_panel.html">
<link rel="import" href="/tracing/ui/base/dom_helpers.html">
<link rel="import" href="/tracing/ui/base/line_chart.html">

<polymer-element name='tr-ui-e-s-alerts-side-panel'
    extends='tr-ui-side-panel'>
  <template>
    <style>
    :host {
      display: block;
      width: 250px;
    }
    #content {
      flex-direction: column;
      display: flex;
    }
    </style>

    <div id='content'>
      <toolbar id='toolbar'></toolbar>
      <result-area id='result_area'></result-area>
    </div>
  </template>

  <script>
  'use strict';

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

    get model() {
      return this.model_;
    },

    set model(model) {
      this.model_ = model;
      this.updateContents_();
    },

    set selection(selection) {
    },

    set rangeOfInterest(rangeOfInterest) {
    },

    /**
     * Fires a selection event selecting all alerts of the specified
     * type.
     */
    selectAlertsOfType: function(alertTypeString) {
      var alertsOfType = this.model_.alerts.filter(function(alert) {
        return alert.title === alertTypeString;
      });

      var event = new tr.model.RequestSelectionChangeEvent();
      event.selection = new tr.model.EventSet(alertsOfType);
      this.dispatchEvent(event);
    },

    /**
     * Returns a map for the specified alerts where each key is the
     * alert type string and each value is a list of alerts with that
     * type.
     */
    alertsByType_: function(alerts) {
      var alertsByType = {};
      alerts.forEach(function(alert) {
        if (!alertsByType[alert.title])
          alertsByType[alert.title] = [];

        alertsByType[alert.title].push(alert);
      });
      return alertsByType;
    },

    alertsTableRows_: function(alertsByType) {
      return Object.keys(alertsByType).map(function(key) {
        return {
          alertType: key,
          count: alertsByType[key].length
        };
      });
    },

    alertsTableColumns_: function() {
      return [
        {
          title: 'Alert type',
          value: function(row) { return row.alertType; },
          width: '180px'
        },
        {
          title: 'Count',
          width: '100%',
          value: function(row) { return row.count; }
        }
      ];
    },

    createAlertsTable_: function(alerts) {
      var alertsByType = this.alertsByType_(alerts);

      var table = document.createElement('tr-ui-b-table');
      table.tableColumns = this.alertsTableColumns_();
      table.tableRows = this.alertsTableRows_(alertsByType);
      table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
      table.addEventListener('selection-changed', function(e) {
        var row = table.selectedTableRow;
        if (row)
          this.selectAlertsOfType(row.alertType);
      }.bind(this));

      return table;
    },

    updateContents_: function() {
      this.$.result_area.textContent = '';
      if (this.model_ === undefined)
        return;

      var panel = this.createAlertsTable_(this.model_.alerts);
      this.$.result_area.appendChild(panel);
    },

    supportsModel: function(m) {
      if (m == undefined) {
        return {
          supported: false,
          reason: 'Unknown tracing model'
        };
      } else if (m.alerts.length === 0) {
        return {
          supported: false,
          reason: 'No alerts in tracing model'
        };
      }

      return {
        supported: true
      };
    },

    get textLabel() {
      return 'Alerts';
    }
  });
  </script>
</polymer-element>