<!--
   The <filter-dialog-sk> custom element declaration.

  A dialog that provides input elements to filter search results by
  metric values.

  Attributes:
    None.

  Methods:
    open() - Opens the dialog.

    close() - Closes the dialog.

    setValue(newValue): Sets the values to be filtered. Needs to be called
      before the dialog is opened.

    setCommitInfo(commitinfo) - Where commitinfo is an array of objects of the form:

       {
         author: "foo@example.org"
         commit_time: 1428574804
         hash: "d9f8862ab6bed4195cbfe5dda48693e1062b01e2"
       }

  Events:
    'edit' - emitted when user clicks the 'Filter' button (and closes the dialog in the process).
             The 'detail' field of the event contains the modified version
             of filter object.

  Mailboxes:
    None

-->

<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/image-icons.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="bower_components/paper-slider/paper-slider.html">
<link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="bower_components/polymer/polymer.html">

<link rel=import href="../common/imp/commit-picker.html">

<link rel="import" href="query-dialog-sk.html">
<link rel="import" href="select-popup-sk.html">
<link rel="import" href="shared-styles.html">

<dom-module id="filter-dialog-sk">
  <template>
     <style include="iron-flex iron-flex-alignment shared-styles">
      paper-slider {
        width: 25em;
        margin-top: 0;
        --paper-slider-input: {
            width: 7em;
          };
      }

      .sliderHeader {
        font-weight: bold;
        font-size: 110%;
      }

      .filterItem {
        padding: 1em;
      }

      .selectLabel {
        font-weight: bold;
        width:15em;
        padding-right: 2em;
      }

      .selectLabel.metricLabel {
        padding-top: .5em;
        width: 2.5em;
      }

      .inlineLabel {
        font-weight: bold;
        padding-right: 1em;
      }

      .currSelection {
        padding: 1em 0 0 1em;
        min-width: 5em;
        max-width: 15em;
        display: inline-block;
      }

      #rightQueryButton {
        max-height: 3em;
      }

      .diffMetricSelect {
        width: 7em;
        margin-right: 1em;
      };

    </style>
    <paper-dialog id="filterDialog" with-backdrop>
      <paper-dialog-scrollable>
        <div class="vertical layout">
            <div class="filterItem horizontal layout">
              <span class="inlineLabel">Diff Config:</span>
              <paper-button id="rightQueryButton" raised><iron-icon icon="image:tune"></iron-icon></paper-button>
              <div class="currSelection">
                [[_splitAmp(_curr.rquery)]]
              </div>
            </div>

            <div class="filterItem">
              Commit Range:
              <commit-picker-sk id="startCommitPicker" repo="[[_repo]]"></commit-picker-sk>
              <commit-picker-sk id="endCommitPicker" repo="[[_repo]]"></commit-picker-sk>
            </div>

            <!-- group by test -->
            <div class="filterItem">
              <span class="selectLabel">Group By Test:</span>
              <paper-dropdown-menu class="groupTestSelect" no-label-float>
                <paper-listbox id="groupTest" class="dropdown-content" selected="{{_curr.fgrouptest}}" attr-for-selected="value">
                  <paper-item value=""></paper-item>
                  <template is='dom-repeat' items='[[_groupTests]]'>
                    <paper-item value="[[item]]">[[item]]</paper-item>
                  </template>
                </paper-listbox>
              </paper-dropdown-menu>
            </div>

            <!-- min RGBA delta  -->
            <div class="filterItem">
              <div class="sliderHeader">Min RGBA Delta</div>
              <paper-slider value="{{_curr.frgbamin}}" min="0" max="255" editable></paper-slider>
            </div>

            <!-- max RGBA delta  -->
            <div class="filterItem">
              <div class="sliderHeader">Max RGBA Delta</div>
              <paper-slider value="{{_curr.frgbamax}}" min="0" max="255" editable></paper-slider>
            </div>

            <!-- Max Diff -->
            <div class="filterItem">
              <div class="sliderHeader">Max Diff</div>
              <paper-slider value="{{_curr.fdiffmax}}" min="-1" max="1" step="0.05" editable></paper-slider>
            </div>

            <!-- match -->
            <div class="filterItem horizontal layout justified">
                <div>
                  <div class="selectLabel">Fields Must Match:</div>
                  <template is='dom-repeat' items='[[_curr.match]]'>
                    <div>[[item]]</div>
                  </template>
                </div>
                <select-popup-sk id="paramsSelect" icon="icons:create"></select-popup-sk>
                <!--<select-popup-sk id="paramsSelect"></select-popup-sk>-->
            </div>

            <!-- metric -->
            <div class="filterItem layout horizontal">
              <!-- Note:The values of the dropdown need to match the metric ids on the backend -->
              <span class="selectLabel metricLabel">Metric:</span>
              <paper-dropdown-menu class="diffMetricSelect" no-label-float>
                <paper-listbox id="diffMetric" class="dropdown-content" selected="{{_curr.metric}}" attr-for-selected="value">
                  <template is='dom-repeat' items='[[_metrics]]'>
                    <paper-item value="[[item]]">[[item]]</paper-item>
                  </template>
                </paper-listbox>
              </paper-dropdown-menu>

              <span class="selectLabel metricLabel">Sort:</span>
              <paper-dropdown-menu class="diffMetricSelect" no-label-float>
                <paper-listbox id="sortResult" class="dropdown-content" selected="{{_curr.sort}}" attr-for-selected="value">
                  <template is='dom-repeat' items='[[_sortOptions]]'>
                    <paper-item value="[[item]]">[[item]]</paper-item>
                  </template>
                </paper-listbox>
              </paper-dropdown-menu>
            </div>

            <!-- has ref image -->
            <div class="filterItem">
              <paper-toggle-button checked="{{_curr.fref}}"><span class="selectLabel">Must have Reference Image</span></paper-toggle-button>
            </div>
          </div>
        </div>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button id="cancelButton" dialog-dismiss>Cancel</paper-button>
        <paper-button id="editButton" raised dialog-dismiss>Filter</paper-button>
      </div>
    </paper-dialog>
    <query-dialog-sk id="rightQueryDialog" submit-label="Select"></query-dialog-sk>
  </template>
  <script>
    (function() {
      // The fields we are interested in.
      var filterFields = [
        "rquery",
        "metric",
        "match",
        "frgbamin",
        "frgbamax",
        "fdiffmax",
        "fgrouptest",
        "fbegin",
        "fend",
        "fref",
        "sort"
      ];

      Polymer({
        is: "filter-dialog-sk",

        properties: {
          _curr: {
            type: Object
          },
          _repo: {
            type: String,
            value: sk.app_config.baseRepoURL
          },
        },

        ready: function() {
          this.listen(this.$.editButton, 'tap', '_handleEditButton');
          this.listen(this.$.paramsSelect, 'changed-selection', '_handleMatchChanged');
          this.listen(this.$.rightQueryButton, 'tap', '_handleRightQueryButton');
          this.listen(this.$.rightQueryDialog, 'edit', '_handleRightQueryEdit');
          this.set('_metrics', gold.allMetrics.slice());
          this.set('_groupTests', gold.groupTestOps.slice());
          this.set('_sortOptions', gold.sortOptions.slice());
          this.listen(this.$.startCommitPicker, 'commit-selected', '_handleCommitSelected');
          this.listen(this.$.endCommitPicker, 'commit-selected', '_handleCommitSelected');
        },

        _handleCommitSelected: function(ev) {
          if (this._curr) {
            var target = ev.currentTarget;
            var commit = ev.detail.commit;
            if (target.id === 'startCommitPicker') {
              this._curr.fbegin = (commit) ? (commit.hash) : ('');
            } else {
              this._curr.fend = (commit) ? (commit.hash) : ('');
            }
          }
        },

        open: function() {
          this.set('_curr', sk.object.shallowCopy(this._value));
          this.$.paramsSelect.setSelection(this._curr.match);
          this.$.filterDialog.open();
        },

        close: function() {
          this.$.filterDialog.close();
        },

        setParamSet: function(params) {
          this.$.rightQueryDialog.queryEle.setParamSet(params);
          this.$.paramsSelect.setParamSet(params);
        },

        setValue: function(newVal) {
          // Extract the fields we are interested in.
          var value = {};
          for(var i=0; i < filterFields.length; i++) {
            var f = filterFields[i];
            if (newVal.hasOwnProperty(f)) {
              if (Array.isArray(newVal[f])) {
                value[f] = newVal[f].slice();
              } else {
                value[f] = newVal[f];
              }
            }
          }
          this._setCommitPicker(this.$.startCommitPicker, newVal.fbegin);
          this._setCommitPicker(this.$.endCommitPicker, newVal.fend);
          this.$.paramsSelect.setSelection(value.match);
          this._value = value;
        },

        _setCommitPicker: function(pickerEle, hash) {
          pickerEle.selectHash(hash);
        },

        setCommitInfo: function(commits) {
          this._commits = commits;
          this.$.startCommitPicker.setCommitInfo(commits);
          this.$.endCommitPicker.setCommitInfo(commits);
        },

        _handleEditButton: function(ev) {
          this._value = sk.object.shallowCopy(this._curr);
          this.fire('edit', sk.object.shallowCopy(this._curr));
        },

        _handleMatchChanged: function(ev) {
          this.set('_curr.match', ev.detail);
        },

        _handleRightQueryButton: function(ev) {
          ev.stopPropagation();
          this.$.rightQueryDialog.open(this._curr.rquery);
        },

        _handleRightQueryEdit: function(ev) {
          ev.stopPropagation();
          this.set('_curr.rquery', ev.detail);
        },

        _splitAmp: function(qStr) {
          return sk.query.splitAmp(qStr, ' \n');
        }
      });
    })();
  </script>
</dom-module>