<!-- The <by-blame-page-sk> custom element declaration.

  A container element to display the current untriaged digests grouped by
  blames.

  Attributes:
    None

  Methods:
    pageSelected: This function has to be called if the page is selected
    via a route. It's  equivalent to the ready function, when we don't
    want to trigger loading the content unless a user selects the page.

  Events:
    None

  Mailboxes:
    None

-->

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="../common/imp/commit-panel.html" />

<link rel="import" href="shared-styles.html">
<link rel="import" href="activity-sk.html">

<dom-module id="byblame-page-sk">
  <template>
    <style include="shared-styles">
      commits-panel-sk,
      table {
        margin: 1em;
        display: block;
      }

      .byBlameWrapper {
        margin-left: 1em;
        margin-right: 1.5em;
        margin-top: 1em;
        margin-bottom: 2.5em;
      }

      .group {
        background: white;
        margin-bottom: 2em;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        border: solid 1px gray;
        padding: 1em;
        box-shadow: 11px 11px 31px 1px rgba(0, 0, 0, 0.52);
      }

      td, th {
        padding: 0.3em;
      }

      th {
        text-align: left;
      }

    </style>
    <div class="byBlameWrapper">
      <activity-sk id="activityMain" busy="{{_hideAll}}"></activity-sk>
      <div hidden$="{{_hideAll}}">
        <div hidden$="{{_hasEntries(data)}}">
          No untriaged digests.
        </div>

        <template is="dom-repeat" items="{{data}}">
          <div class="group">
            <a target="_blank" href$="/search?blame={{item.groupID}}&unt=true&head=true&{{_queryStr}}">
              {{item.nDigests}} digest(s) need triaging
            </a>

            <template is="dom-if" if="{{_noBlames(item)}}">
              <h3>No blamelist.</h3>
            </template>

            <template is="dom-if" if="{{!_noBlames(item)}}">
              <h3>Blame</h3>
              <commits-panel-sk commitinfo="[[item.commits]]" progress="[[_showProgress]]" repo="[[_repo]]"></commits-panel-sk>
            </template>

            <h3>Tests Affected</h3>
            <div>
              {{item.nTests}} tests affected.
            </div>

            <template is="dom-if" if="{{_hasAffectedTests(item)}}">
              <table>
                <tr><th>Test</th><th>Num Digests</th><th>Example</th></tr>
                <template is="dom-repeat" items="{{item.affectedTests}}">
                <tr>
                  <td>{{item.test}}</td><td>{{item.num}}</td>
                  <td><a target=_blank href$="{{_detailHref(item)}}">
                  {{item.sample_digest}}</a></td>
                </tr>
                </template>
              </table>
            </template>
          </div>
        </template>
      </div>
    </div>
  </template>

  <script>
    Polymer({
    	is: "byblame-page-sk",

      behaviors: [gold.PageStateBehavior],

      properties:{
        data: {
          type: Array,
          value: []
        },
        _repo: {
          type: String,
          value: sk.app_config.baseRepoURL
        },
        _showProgress: {
          type: Boolean,
          value: sk.app_config.showBotProgress
        }
      },

      ready: function() {
        this._setDefaultState(gold.defaultByBlameState, true);
      },

      // pageSelected is called by the router when this view enters the foreground.
    	pageSelected: function(ctx) {
        this._initState(ctx, this._getDefaultStateWithCorpus());
        this.set('_queryStr', window.location.search.slice(1));
        this._load();
    	},

      // pageDeselected is called by the router when this view enters the background.
      pageDeselected: function(routeName) {},

      _load: function() {
        var q = window.location.search;
        this.$.activityMain.startSpinner("Loading ...");
        sk.get("/json/byblame" + q).then(JSON.parse).then(function (json) {
          // Send the commits to the mailboxes identified by the group id.
          this.set('data', json.data);
          this.$.activityMain.stopSpinner();
        }.bind(this)).catch(function(e) {
          this.$.activityMain.stopSpinner();
          sk.errorMessage(e);
        }.bind(this));
      },

      _detailHref: function(item) {
        return '/detail' + gold.detailQuery(item.test, item.sample_digest);
      },

      _hasEntries: function(data) {
        return data && (data.length > 0);
      },

      _noBlames: function(item) {
        return !item.commits || (item.commits.lenght == 0);
      },

      _hasAffectedTests: function(item) {
        return !!item.affectedTests && (item.affectedTests.length > 0);
      }
    });
  </script>
</dom-module>