  <!-- The <search-controls-sk> custom element declaration.

    This is a general element to be used by all pages that
    call a search endpoint on the backend.
    It encapsulates the state of the query. When that state
    is changed through some of the controls it updates the URL
    and send an update to the host element to reload data based
    on the new query state.

    The state object contains these fields:
      - pos: show positive (boolean).
      - neg: show negative (boolean).
      - unt: show untriaged (boolean).
      - include: show ignored digests (boolean).
      - head: only digests that are currently in HEAD.
      - query: query string to select configuration.

    Attributes:
      state - The current query state.

      disabled - Boolean to indicate whether to disable all the controls.
      beta - Boolean to enable beta-level functions.

    Events:
      'state-change' - Fired when the state of the query changes and
          it needs to be reloaded. The 'detail' field of the event contains
          the new state represented by the controls.

    Methods:
      setState(state) - Set the state of the controls to 'state'.

      setParamSet(params) - Sets the parameters of the enclosed query-dialog-sk element
          and enables the controls accordingly.

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

        {
          author: "foo@example.org"
          commit_time: 1428574804
          hash: "d9f8862ab6bed4195cbfe5dda48693e1062b01e2"
        }
  -->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html">
<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/paper-button/paper-button.html">
<link rel="import" href="query-dialog-sk.html">
<link rel="import" href="filter-dialog-sk.html">
<link rel="import" href="shared-styles.html">

<dom-module id="search-controls-sk">
  <template>
    <style include="iron-flex iron-flex-alignment"></style>
    <style include="shared-styles">
      .horizontalTopControl {
        font-weight: bold;
      }

      .horizontalTopControl {
        margin: 0 2em 0 0;
      }

      .horizontal.currSelection {
        margin-left: 1em;
        margin-right: 3em;
        max-width: 20em;
      }

      .corpus_label {
        font-weight: bold;
        margin: auto 0;
      }

    </style>
      <div class="vertical layout">
        <div class="horizontal layout">
          <paper-toggle-button class="horizontalTopControl" checked="{{state.pos}}" disabled={{disabled}}>Positive</paper-toggle-button>
          <paper-toggle-button class="horizontalTopControl" checked="{{state.neg}}" disabled={{disabled}}>Negative</paper-toggle-button>
          <paper-toggle-button class="horizontalTopControl" checked="{{state.unt}}" disabled={{disabled}}>Untriaged</paper-toggle-button>
          <paper-toggle-button class="horizontalTopControl" checked="{{state.head}}" disabled={{disabled}}>Head</paper-toggle-button>
          <paper-toggle-button class="horizontalTopControl" checked="{{state.include}}" disabled={{disabled}}>Ignored</paper-toggle-button>

          <paper-button id="filterButton" class$="topControl" raised disabled="[[disabled]]"
                        title="Metrics Filter"><iron-icon icon="icons:filter-list"></iron-icon>
          </paper-button>
        </div>
        <div class="horizontal layout">
          <span class=corpus_label>Corpus:</span>
          <corpus-selector-sk id="corpusSelector"></corpus-selector-sk>
        </div>
        <div class="horizontal layout">
          <paper-button id="searchButton" class$="topControl" raised disabled="[[disabled]]"
                        title="Filter Traces"><iron-icon icon="image:tune"></iron-icon></paper-button>

          <div class="horizontal currSelection">
            [[_splitAmp(state.query)]]
          </div>
        </div>
      </div>

      <query-dialog-sk id="queryDialog" trigger="searchButton"></query-dialog-sk>
      <filter-dialog-sk id="filterDialog" trigger="filterButton"></filter-dialog-sk>
  </template>

  <script>
      Polymer({
        is: "search-controls-sk",

        properties: {
          state: {
            type: Object
          },

          disabled: {
            type: Boolean,
            value: false
          },

          beta: {
            type: Boolean,
            value: false
          }
        },

        observers: [
          '_fireStateChange(state.*)'
        ],

        ready: function() {
          this.listen(this.$.searchButton, 'tap', '_handleSearchButton');
          this.listen(this.$.filterButton, 'tap', '_handleFilterButton');
          this.listen(this.$.queryDialog, 'edit', '_handleQueryEdit');
          this.listen(this.$.filterDialog, 'edit', '_handleFilterEdit');
          this.listen(this.$.corpusSelector, 'corpus_selected', '_handleCorpusChange');

          // If the corpus changes make sure we do cleanup work.
          this.async(function() {
            this._statusEle = $$$("gold-status-sk");
            if (this._statusEle) {
              this.listen(this._statusEle, 'corpus-change', '_handleCorpusChange');
            }
          });
        },

        setState: function(state, fireEvent) {
          this._noFire = !fireEvent;
          this.set('state', sk.object.shallowCopy(state));
          this.$.filterDialog.setValue(this.state);
          const query = sk.query.toParamSet(state.query);
          const corporaSelected = query['source_type'];
          if (corporaSelected && corporaSelected.length) {
            this.$.corpusSelector.selectedCorpus = corporaSelected[0];
          } else {
            this.$.corpusSelector.selectedCorpus = sk.app_config.defaultCorpus;
          }
        },

        setParamSet: function(params) {
          this.$.queryDialog.queryEle.setParamSet(params);
          this.$.filterDialog.setParamSet(params);
          // TODO(kjlubick) in the lit-html version, this should reflect of digests as matched by
          //   the positive/negative/diff selector (i.e. the things above it).
          const corpora = params['source_type'].map((name) => {
            return {
              name: name,
            };
          });
          this.$.corpusSelector.corpora = corpora;
        },

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

        _handleQueryEdit: function(ev) {
          ev.stopPropagation();
          this.set('state.query', ev.detail);
        },

        _handleFilterEdit: function(ev) {
          ev.stopPropagation();
          // merge filter into state
          var newState = sk.object.applyDelta(ev.detail, this.state);
          this.set('state', newState);
        },

        _handleSearchButton: function(ev) {
          ev.stopPropagation();
          this.$.queryDialog.open(this.state.query);
        },

        _handleFilterButton: function(ev) {
          ev.stopPropagation();
          this.$.filterDialog.open(this.state.filter);
        },

        _handleCorpusChange: function(ev) {
          this.$.queryDialog.close();

          // TODO(kjlubick) This is a dirty ugly hack, making the corpus change reload the entire
          //   page. However, the port to lit-html is coming soon, and I don't feel like making
          //   more changes to this Polymer code than is necessary.
          const params = sk.query.toParamSet(this.state.query);
          params.source_type = [ev.detail.corpus];
          this.state.query = sk.query.fromParamSet(params);
          window.location = window.location.pathname + gold.queryFromState(this.state);
        },

        _fireStateChange: function() {
          if (this._noFire) {
            this._noFire = false;
            return;
          }

          var detail = sk.object.shallowCopy(this.state);
          this.fire('state-change', detail);
        },

        _splitAmp: function(qStr) {
          return sk.query.splitAmp(qStr, ', ');
        }

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