<!DOCTYPE html>
<!--
Copyright (c) 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="/base/base.html">
<link rel="import" href="/ui/analysis/analysis_sub_view.html">
<link rel="import" href="/ui/base/dom_helpers.html">
<link rel="import" href="/ui/base/table.html">
<link rel="import" href="/ui/base/ui.html">

<polymer-element name="tr-ui-a-alert-sub-view"
    extends="tr-ui-a-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    #table {
      flex: 1 1 auto;
      align-self: stretch;
    }
    </style>
    <tr-ui-b-table id="table">
    </tr-ui-b-table>
  </template>
  <script>
  'use strict';

  Polymer({
    ready: function() {
      this.currentSelection_ = undefined;
      this.$.table.tableColumns = [
        {
          title: 'Label',
          value: function(row) { return row.name; },
          width: '150px'
        },
        {
          title: 'Value',
          width: '100%',
          value: function(row) { return row.value; }
        }
      ];
      this.$.table.showHeader = false;
    },

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

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

    getRowsForSingleAlert_: function(alert) {
      var rows = [];

      // Arguments
      for (var argName in alert.args) {
        var argView =
            document.createElement('tr-ui-a-generic-object-view');
        argView.object = alert.args[argName];
        rows.push({ name: argName, value: argView });
      }

      // Associated events
      if (alert.associatedEvents.length) {
        alert.associatedEvents.forEach(function(event, i) {
          var linkEl = document.createElement('tr-ui-a-analysis-link');
          linkEl.setSelectionAndContent(function() {
            return event;
          }, event.title);

          var valueString = '';
          if (event instanceof tr.model.TimedEvent)
            valueString = 'took ' + event.duration.toFixed(2) + 'ms';

          rows.push({
            name: linkEl,
            value: valueString
          });
        });
      }

      // Description
      var descriptionEl = tr.ui.b.createDiv({
          textContent: alert.info.description,
          maxWidth: '300px'
      });
      rows.push({
        name: 'Description',
        value: descriptionEl
      });

      // Additional Reading Links
      if (alert.info.docLinks) {
        alert.info.docLinks.forEach(function(linkObject) {
          var linkEl = document.createElement('a');
          linkEl.target = '_blank';
          linkEl.href = linkObject.href;
          linkEl.textContent = linkObject.textContent;
          rows.push({
            name: linkObject.label,
            value: linkEl
          });
        });
      }
      return rows;
    },

    getRowsForAlerts_: function(alerts) {
      if (alerts.length == 1) {
        var rows = [{
          name: 'Alert',
          value: alerts[0].title
        }];
        var detailRows = this.getRowsForSingleAlert_(alerts[0]);
        rows.push.apply(rows, detailRows);
        return rows;
      } else {
        return alerts.map(function(alert) {
          return {
            name: 'Alert',
            value: alert.title,
            isExpanded: alerts.size < 10, // This is somewhat arbitrary for now.
            subRows: this.getRowsForSingleAlert_(alert)
          };
        }, this);
      }
    },

    updateContents_: function() {
      if (this.currentSelection_ === undefined) {
        this.$.table.rows = [];
        this.$.table.rebuild();
        return;
      }

      var alerts = this.currentSelection_;
      this.$.table.tableRows = this.getRowsForAlerts_(alerts);
      this.$.table.rebuild();
    },

    get relatedEventsToHighlight() {
      if (!this.currentSelection_)
        return undefined;
      return this.currentSelection_[0].associatedEvents;
    }
  });
  </script>
</polymer-element>