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

  Attributes:
    title - The text to display in the button when no commit
      has been selected.

    commit - The cid.CommitDetail of the selected commit, or
      null if no commit has been selected.

  Events:
    commit-selected - Event produced when a commit is selected. The
      the event detail contains the serialized cid.CommitDetail.

      {
        author: "foo (foo@example.org)",
        url: "skia.googlesource.com/bar",
        message: "Commit from foo.",
        ts: 1439649751,
      },

  Methods:
    setCommitDetail(d) - Where d is an Array of serialized cid.CommitDetail,
    i.e. they look like:

      {
        author: "foo (foo@example.org)",
        url: "skia.googlesource.com/bar",
        message: "Commit from foo.",
        ts: 1439649751,
      },

    select(index) - Causes the commit at 'index' to be selected.
-->

<link rel="stylesheet" href="/res/common/css/md.css">
<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">

<link rel="import" href="commit-detail-panel.html">

<dom-module id="commit-detail-picker-sk">
  <style>
  </style>
  <template>
    <button class=raised id=select>[[title]]</button>
    <paper-dialog id=dialog>
      <paper-dialog-scrollable>
        <commit-detail-panel-sk selectable id=panel><commit-detail-panel-sk>
      </paper-dialog-scrollable>
      <div class=buttons>
        <button dialog-confirm>Close</button>
      </div>
    </paper-dialog>
  </template>
</dom-module>

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

    properties: {
      title: {
        type: String,
        value: "Choose a commit.",
      },
      commit: {
        type: Object,
        value: null,
      },
    },

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

    setCommitDetail: function(details) {
      this.$.panel.setCommitDetail(details);
      this.commit = {};
    },

    select: function(index) {
      this.$.panel.select(index);
    },

    _selectTap: function() {
      this.$.dialog.open();
    },

    _panelSelect: function(e) {
      this.set('title', e.detail.description);
      this.commit = e.detail.commit;
    },

  });
</script>