<!--
Copyright (C) 2015 The Android Open Source Project

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
<link rel="import" href="../behaviors/rest-client-behavior.html">
<link rel="import" href="gr-account-link.html">
<link rel="import" href="gr-ajax.html">
<link rel="import" href="gr-button.html">
<link rel="import" href="gr-change-actions.html">
<link rel="import" href="gr-change-star.html">
<link rel="import" href="gr-date-formatter.html">
<link rel="import" href="gr-download-dialog.html">
<link rel="import" href="gr-file-list.html">
<link rel="import" href="gr-linked-text.html">
<link rel="import" href="gr-messages-list.html">
<link rel="import" href="gr-overlay.html">
<link rel="import" href="gr-related-changes-list.html">
<link rel="import" href="gr-reply-dropdown.html">
<link rel="import" href="gr-reviewer-list.html">

<dom-module id="gr-change-view">
  <template>
    <style>
      .container {
        margin: 1em var(--default-horizontal-margin);
      }
      .container:not(.loading) {
        background-color: var(--view-background-color);
      }
      .container.loading {
        color: #666;
      }
      .headerContainer {
        height: 4.1em;
        margin-bottom: .5em;
      }
      .header {
        align-items: center;
        background-color: var(--view-background-color);
        border-bottom: 1px solid #ddd;
        display: flex;
        padding: 1em var(--default-horizontal-margin);
        z-index: 99;  /* Less than gr-overlay's backdrop */
      }
      .header.pinned {
        border-bottom-color: transparent;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        transition: box-shadow 250ms linear;
        width: calc(100% - (2 * var(--default-horizontal-margin)));
      }
      .header-title {
        flex: 1;
        font-size: 1.2em;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      gr-change-star {
        margin-right: .25em;
        vertical-align: -.425em;
      }
      .download,
      .patchSelectLabel {
        margin-left: var(--default-horizontal-margin);
      }
      .header select {
        margin-left: .5em;
      }
      .header gr-reply-dropdown {
        margin-left: var(--default-horizontal-margin);
      }
      .changeStatus {
        color: #999;
        text-transform: capitalize;
      }
      section {
        margin: 10px 0;
        padding: 10px var(--default-horizontal-margin);
      }
      /* Strong specificity here is needed due to
         https://github.com/Polymer/polymer/issues/2531 */
      .container section.changeInfo {
        border-bottom: 1px solid #ddd;
        display: flex;
        margin-top: 0;
        padding-top: 0;
      }
      .changeInfo-column:not(:last-of-type) {
        margin-right: 2em;
      }
      table {
        border-collapse: collapse;
      }
      td {
        padding: 2px 5px 2px 0;
        vertical-align: top;
      }
      .changeMetadata-label {
        font-weight: bold;
      }
      .labelValue:not(:first-of-type) {
        margin-top: .25em;
      }
      .labelValue .approved,
      .labelValue .notApproved {
        display: inline-block;
        padding: .1em .3em;
        border-radius: 3px;
      }
      .approved {
        background-color: #d4ffd4;
      }
      .notApproved {
        background-color: #ffd4d4;
      }
      gr-change-actions {
        margin-top: 1em;
      }
      .commitMessage {
        font-family: var(--monospace-font-family);
        flex: 0 0 72ch;
      }
      .commitMessage h4 {
        font-family: var(--font-family);
        font-weight: bold;
        margin-bottom: .25em;
      }
      gr-file-list {
        margin-bottom: 1em;
        padding: 0 var(--default-horizontal-margin);
      }
      @media screen and (max-width: 80em) {
        .changeInfo {
          flex-wrap: wrap;
        }
        .changeInfo-column {
          margin-right: 0;
        }
        .changeInfo-column:not(:first-of-type) {
          margin-top: .5em;
        }
      }
      @media screen and (max-width: 60em) {
        .changeInfo {
          flex-direction: column;
          flex-wrap: nowrap;
        }
        .commitMessage {
          flex: initial;
        }
      }
    </style>
    <gr-ajax id="detailXHR"
        url="[[_computeDetailPath(_changeNum)]]"
        params="[[_computeDetailQueryParams()]]"
        last-response="{{_change}}"
        loading="{{_loading}}"></gr-ajax>
    <gr-ajax id="commentsXHR"
        url="[[_computeCommentsPath(_changeNum)]]"
        last-response="{{_comments}}"></gr-ajax>
    <gr-ajax id="commitInfoXHR"
        url="[[_computeCommitInfoPath(_changeNum, _patchNum)]]"
        last-response="{{_commitInfo}}"></gr-ajax>
    <!-- TODO(andybons): Cache the project config. -->
    <gr-ajax id="configXHR"
        auto
        url="[[_computeProjectConfigPath(_change.project)]]"
        last-response="{{_projectConfig}}"></gr-ajax>
    <div class="container loading" hidden$="{{!_loading}}">Loading...</div>
    <div class="container" hidden$="{{_loading}}">
      <div class="headerContainer">
        <div class="header">
          <span class="header-title">
            <gr-change-star change="{{_change}}" hidden$="[[!_loggedIn]]"></gr-change-star>
            <a href$="[[_computeChangePermalink(_change._number)]]">[[_change._number]]</a><span>:</span>
            <span>[[_change.subject]]</span>
            <span class="changeStatus">[[_computeChangeStatus(_change.status)]]</span>
          </span>
          <gr-reply-dropdown id="replyDropdown"
              change-num="[[_changeNum]]"
              patch-num="[[_patchNum]]"
              labels="[[_change.labels]]"
              permitted-labels="[[_change.permitted_labels]]"
              on-send="_handleReplySent"
              hidden$="[[!_loggedIn]]">Reply</gr-reply-dropdown>
          <gr-button link class="download" on-tap="_handleDownloadTap">Download</gr-button>
          <label class="patchSelectLabel" for="patchSetSelect">Patch set</label>
          <select id="patchSetSelect" on-change="_handlePatchChange">
            <template is="dom-repeat" items="{{_allPatchSets}}" as="patchNumber">
              <option value$="[[patchNumber]]" selected$="[[_computePatchIndexIsSelected(index, _patchNum)]]">
                <span>[[patchNumber]]</span>
                /
                <span>[[_computeLatestPatchNum(_change)]]</span>
              </option>
            </template>
          </select>
        </div>
      </div>
      <section class="changeInfo">
        <div class="changeInfo-column changeMetadata">
          <table>
            <tr>
              <td class="changeMetadata-label">Owner</td>
              <td>
                <gr-account-link account="[[_change.owner]]"></gr-account-link>
              </td>
            </tr>
            <tr>
              <td class="changeMetadata-label">Reviewers</td>
              <td>
                <gr-reviewer-list
                    change="[[_change]]"
                    mutable="[[_loggedIn]]"
                    suggest-from="[[serverConfig.suggest.from]]"></gr-reviewer-list>
              </td>
            </tr>
            <tr>
              <td class="changeMetadata-label">Project</td>
              <td>[[_change.project]]</td>
            </tr>
            <tr>
              <td class="changeMetadata-label">Branch</td>
              <td>[[_change.branch]]</td>
            </tr>
            <tr>
              <td class="changeMetadata-label">Topic</td>
              <td>[[_change.topic]]</td>
            </tr>
            <tr>
              <td class="changeMetadata-label">Strategy</td>
              <td></td>
            </tr>
            <tr>
              <td class="changeMetadata-label">Updated</td>
              <td>
                <gr-date-formatter
                    date-str="[[_change.updated]]"></gr-date-formatter>
              </td>
            </tr>
            <template is="dom-repeat"
                items="[[_computeLabelNames(_change.labels)]]" as="labelName">
              <tr>
                <td class="changeMetadata-label">[[labelName]]</td>
                <td>
                  <template is="dom-repeat"
                      items="[[_computeLabelValues(labelName, _change.labels)]]"
                      as="label">
                    <div class="labelValue">
                      <span class$="[[label.className]]">
                        <span>[[label.value]]</span>
                        <gr-account-link account="[[label.account]]"></gr-account-link>
                      </span>
                    </div>
                  </template>
                </td>
              </tr>
            </template>
          </table>
          <gr-change-actions id="actions"
              actions="[[_change.actions]]"
              change-num="[[_changeNum]]"
              patch-num="[[_patchNum]]"
              on-reload-change="_handleReloadChange"></gr-change-actions>
        </div>
        <div class="changeInfo-column commitMessage">
          <h4>Commit message</h4>
          <gr-linked-text pre
              content="[[_commitInfo.message]]"
              config="[[_projectConfig.commentlinks]]"></gr-linked-text>
        </div>
        <div class="changeInfo-column">
          <gr-related-changes-list id="relatedChanges"
              change="[[_change]]"
              server-config="[[serverConfig]]"
              patch-num="[[_patchNum]]"></gr-related-changes-list>
        </div>
      </section>
      <gr-file-list id="fileList"
          change-num="[[_changeNum]]"
          patch-num="[[_patchNum]]"
          comments="[[_comments]]"
          selected-index="{{viewState.selectedFileIndex}}"></gr-file-list>
      <gr-messages-list id="messageList"
          change-num="[[_changeNum]]"
          messages="[[_change.messages]]"
          comments="[[_comments]]"
          project-config="[[_projectConfig]]"
          show-reply-buttons="[[_loggedIn]]"
          on-reply="_handleMessageReply"></gr-messages-list>
    </div>
    <gr-overlay id="downloadOverlay" with-backdrop>
      <gr-download-dialog
          change="[[_change]]"
          patch-num="[[_patchNum]]"
          config="[[serverConfig.download]]"
          on-close="_handleDownloadDialogClose"></gr-download-dialog>
    </gr-overlay>
  </template>
  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'gr-change-view',

      /**
       * Fired when the title of the page should change.
       *
       * @event title-change
       */

      properties: {
        /**
         * URL params passed from the router.
         */
        params: {
          type: Object,
          observer: '_paramsChanged',
        },
        viewState: {
          type: Object,
          notify: true,
          value: function() { return {}; },
        },
        serverConfig: Object,
        keyEventTarget: {
          type: Object,
          value: function() { return document.body; },
        },

        _comments: Object,
        _change: {
          type: Object,
          observer: '_changeChanged',
        },
        _commitInfo: Object,
        _changeNum: String,
        _patchNum: String,
        _allPatchSets: {
          type: Array,
          computed: '_computeAllPatchSets(_change)',
        },
        _loggedIn: {
          type: Boolean,
          value: false,
        },
        _loading: Boolean,
        _headerContainerEl: Object,
        _headerEl: Object,
        _projectConfig: Object,
        _boundScrollHandler: {
          type: Function,
          value: function() { return this._handleBodyScroll.bind(this); },
        },
      },

      behaviors: [
        Gerrit.KeyboardShortcutBehavior,
        Gerrit.RESTClientBehavior,
      ],

      ready: function() {
        app.accountReady.then(function() {
          this._loggedIn = app.loggedIn;
        }.bind(this));
        this._headerEl = this.$$('.header');
      },

      attached: function() {
        window.addEventListener('scroll', this._boundScrollHandler);
      },

      detached: function() {
        window.removeEventListener('scroll', this._boundScrollHandler);
      },

      _handleBodyScroll: function(e) {
        var containerEl = this._headerContainerEl ||
            this.$$('.headerContainer');

        // Calculate where the header is relative to the window.
        var top = containerEl.offsetTop;
        for (var offsetParent = containerEl.offsetParent;
             offsetParent;
             offsetParent = offsetParent.offsetParent) {
          top += offsetParent.offsetTop;
        }
        // The element may not be displayed yet, in which case do nothing.
        if (top == 0) { return; }

        this._headerEl.classList.toggle('pinned', window.scrollY >= top);
      },

      _resetHeaderEl: function() {
        var el = this._headerEl || this.$$('.header');
        this._headerEl = el;
        el.classList.remove('pinned');
      },

      _handlePatchChange: function(e) {
        var patchNum = e.target.value;
        var currentPatchNum =
            this._change.revisions[this._change.current_revision]._number;
        if (patchNum == currentPatchNum) {
          page.show(this._computeChangePath(this._changeNum));
          return;
        }
        page.show(this._computeChangePath(this._changeNum) + '/' + patchNum);
      },

      _handleDownloadTap: function(e) {
        e.preventDefault();
        this.$.downloadOverlay.open();
      },

      _handleDownloadDialogClose: function(e) {
        this.$.downloadOverlay.close();
      },

      _handleMessageReply: function(e) {
        var msg = e.detail.message.message;
        var quoteStr = msg.split('\n').map(
            function(line) { return '> ' + line; }).join('\n') + '\n\n';
        this.$.replyDropdown.draft += quoteStr;
        this.$.replyDropdown.open();
      },

      _handleReplySent: function(e) {
        this._reload();
      },

      _paramsChanged: function(value) {
        if (value.view != this.tagName.toLowerCase()) { return; }

        this._changeNum = value.changeNum;
        this._patchNum = value.patchNum;
        if (this.viewState.changeNum != this._changeNum ||
            this.viewState.patchNum != this._patchNum) {
          this.set('viewState.selectedFileIndex', 0);
          this.set('viewState.changeNum', this._changeNum);
          this.set('viewState.patchNum', this._patchNum);
        }
        if (!this._changeNum) {
          return;
        }
        this._reload().then(function() {
          this.$.messageList.topMargin = this._headerEl.offsetHeight;

          // Allow the message list to render before scrolling.
          this.async(function() {
            var msgPrefix = '#message-';
            var hash = window.location.hash;
            if (hash.indexOf(msgPrefix) == 0) {
              this.$.messageList.scrollToMessage(hash.substr(msgPrefix.length));
            }
          }.bind(this), 1);

          app.accountReady.then(function() {
            if (!this._loggedIn) { return; }

            if (this.viewState.showReplyDropdown) {
              this.$.replyDropdown.open();
              this.set('viewState.showReplyDropdown', false);
            }
          }.bind(this));
        }.bind(this));
      },

      _changeChanged: function(change) {
        if (!change) { return; }
        this._patchNum = this._patchNum ||
            change.revisions[change.current_revision]._number;

        var title = change.subject + ' (' + change.change_id.substr(0, 9) + ')';
        this.fire('title-change', {title: title});
      },

      _computeChangePath: function(changeNum) {
        return '/c/' + changeNum;
      },

      _computeChangePermalink: function(changeNum) {
        return '/' + changeNum;
      },

      _computeChangeStatus: function(status) {
        if (status == this.ChangeStatus.NEW) {
          return '';
        }
        return '(' + status.toLowerCase() + ')';
      },

      _computeDetailPath: function(changeNum) {
        return '/changes/' + changeNum + '/detail';
      },

      _computeCommitInfoPath: function(changeNum, patchNum) {
        return this.changeBaseURL(changeNum, patchNum) + '/commit?links';
      },

      _computeCommentsPath: function(changeNum) {
        return '/changes/' + changeNum + '/comments';
      },

      _computeProjectConfigPath: function(project) {
        return '/projects/' + encodeURIComponent(project) + '/config';
      },

      _computeDetailQueryParams: function() {
        var options = this.listChangesOptionsToHex(
            this.ListChangesOption.ALL_REVISIONS,
            this.ListChangesOption.CHANGE_ACTIONS,
            this.ListChangesOption.DOWNLOAD_COMMANDS
        );
        return {O: options};
      },

      _computeLatestPatchNum: function(change) {
        return change.revisions[change.current_revision]._number;
      },

      _computeAllPatchSets: function(change) {
        var patchNums = [];
        for (var rev in change.revisions) {
          patchNums.push(change.revisions[rev]._number);
        }
        return patchNums.sort();
      },

      _computePatchIndexIsSelected: function(index, patchNum) {
        return this._allPatchSets[index] == patchNum;
      },

      _computeLabelNames: function(labels) {
        return Object.keys(labels).sort();
      },

      _computeLabelValues: function(labelName, labels) {
        var result = [];
        var t = labels[labelName];
        if (!t) { return result; }
        var approvals = t.all || [];
        approvals.forEach(function(label) {
          if (label.value && label.value != labels[labelName].default_value) {
            var labelClassName;
            var labelValPrefix = '';
            if (label.value > 0) {
              labelValPrefix = '+';
              labelClassName = 'approved';
            } else if (label.value < 0) {
              labelClassName = 'notApproved';
            }
            result.push({
              value: labelValPrefix + label.value,
              className: labelClassName,
              account: label,
            });
          }
        });
        return result;
      },

      _handleKey: function(e) {
        if (this.shouldSupressKeyboardShortcut(e)) { return; }

        switch (e.keyCode) {
          case 65:  // 'a'
            e.preventDefault();
            this.$.replyDropdown.open();
            break;
          case 85:  // 'u'
            e.preventDefault();
            page.show('/');
            break;
        }
      },

      _handleReloadChange: function() {
        page.show(this._computeChangePath(this._changeNum));
      },

      _reload: function() {
        var detailCompletes = this.$.detailXHR.generateRequest().completes;
        this.$.commentsXHR.generateRequest();
        var reloadPatchNumDependentResources = function() {
          return Promise.all([
            this.$.commitInfoXHR.generateRequest().completes,
            this.$.actions.reload(),
            this.$.fileList.reload(),
          ]);
        }.bind(this);
        var reloadDetailDependentResources = function() {
          return this.$.relatedChanges.reload();
        }.bind(this);

        this._resetHeaderEl();

        if (this._patchNum) {
          return reloadPatchNumDependentResources().then(function() {
            return detailCompletes;
          }).then(reloadDetailDependentResources);
        } else {
          // The patch number is reliant on the change detail request.
          return detailCompletes.then(reloadPatchNumDependentResources).then(
              reloadDetailDependentResources);
        }
      },

    });
  })();
  </script>
</dom-module>