<!-- The <perf-commit-picker-sk> custom element declaration.

  Attributes:
    commit - A serialized perftracedb.CommitIDLong of the chosen commit. This is null if
      no selection has been made.

    title - The text to put into the button which displays the commit panel.

  Events:
    commit-selected - Event produced when a commit is selected. The event
      detail contains:

      {
         ts: 14070203,
         id: "123abc",
         source: "master",
         author: "name@example.org",
         desc: "Adds short commits."
      },

  Methods:
    selectCommitID - Forces the selection of the given id and source.

  Mailboxes:
    commits - The sk.Mailbox name to listen for the data to populate
      the element. The mailbox data needs to be a serialized slice
      of []*perftracedb.CommitIDLong.

        [
          {
            commit_time: 1439649751,
            author: "reed (reed@chromium.org)",
            hash: "bb886749feb444edfd8fbf053a9ea815e3605f8a",
          },
          {
            author: "reed (reed@chromium.org)",
            commit_time: 1439648914,
            hash: "e02716908fe82c7c4ae9b415793277620a22bcd6",
          },
        ]

-->
<link rel="stylesheet" href="/res/common/css/md.css">
<link rel="import" href="commit-panel.html">
<link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/res/imp/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">

<dom-module id="perf-commit-picker-sk">
  <style type="text/css" media="screen">
    perf-commits-panel-sk {
      display: block;
      padding: 1em;
      border: solid lightgray 1px;
      margin: 1em;
      margin-left: 2em;
    }
    perf-commits-panel-sk.hidden {
      display: none;
    }
  </style>
  <template>
    <button class=raised id=select>{{title}}</button>
    <perf-commits-panel-sk id=panel selection class=hidden></perf-commits-panel-sk>
  </template>
</dom-module>

<script>
  Polymer({
    is: "perf-commit-picker-sk",

    properties: {
      commit: {
        type: Object,
        value: null,
      },
      title: {
        type: String,
        value: "",
        reflectToAttribute: true,
      },
    },

    listeners: {
      "select.tap": "_selectTap",
      "panel.commit-selected": "_panelSelect",
    },

    selectCommitID: function(id, source) {
      this.$.panel.selectCommitID(id, source);
    },

    _selectTap: function() {
      this.$.panel.classList.remove('hidden');
    },

    _panelSelect: function(e) {
      this.commit = e.detail.commit;
      this.notifyPath('title', e.detail.description)
      this.$.panel.classList.add('hidden');
    },
  });
</script>