<!-- The <query-chooser-sk> custom element declaration.

  Displays the current value for a selection along with an edit button
  that pops up a query-sk dialog to change the selection.

  Attributes:
    query - The underlying query-sk element.
    whitelist - A list of keys for params that should always be shown.

  Events:
    See query-sk.

  Methods:
    None.
-->
<link rel="stylesheet" href="/res/common/css/md.css">
<link rel=import href="query.html">

<dom-module id="query-chooser-sk">
  <style>
    query-summary-sk {
      display: block;
    }

    #dialog {
      display: none;
      padding: 2em;
      border: solid lightgray 1px;
    }

    #dialog.display {
      display: block;
    }

    #edit {
      margin: 0;
    }

    :host {
      display: block;
      padding: 1em;
    }
  </style>
  <template>
    <div id="dialog">
      <query-sk id=query whitelist="{{whitelist}}"></query-sk>
      <div class=buttons>
        <button id=close class=action>Close</button>
      </div>
    </div>
    <query-summary-sk id=summary></query-summary-sk>
    <button class=raised id=edit>Edit</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: "query-chooser-sk",

    properties: {
      whitelist: {
        type: Array,
        value: function() {
          return [
            'name',
            'bench_type',
            'os',
            'source_type',
            'scale',
            'extra_config',
            'config',
            'arch',
            'sub_result'
          ];
        },
        reflectToAttribute: true
      },
    },

    listeners: {
      "edit.tap": "_editTap",
      "close.tap": "_closeTap",
      "query.query-change": "_queryChanged",
    },

    _queryChanged: function(e) {
      this.$.summary.selection = e.detail;
    },

    _editTap: function() {
      this.$.dialog.classList.add('display');
    },

    _closeTap: function() {
      this.$.dialog.classList.remove('display');
    },

    ready: function() {
      this.query = this.$.query;
    },
  });
</script>