import dialogPolyfill from 'dialog-polyfill'
import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'

import 'elements-sk/icon/check-icon-sk'
import 'elements-sk/icon/warning-icon-sk'
import 'elements-sk/select-sk'
import 'elements-sk/styles/buttons'
import { upgradeProperty } from 'elements-sk/upgradeProperty'

import { diffDate } from 'common-sk/modules/human'

function linkToCommit(hash) {
  return 'https://skia.googlesource.com/buildbot/+show/' + hash;
}

function shorten(s) {
  return s.slice(0, 8);
}

const dirtyIndicator = (choice) => {
  return choice.Dirty ? html`<warning-icon-sk title="Uncommited changes when the package was built."></warning-icon-sk>` : ``;
}

const listChoices = (choices) => choices.map((choice) => html`
  <div class=pushSelection data-name="${choice.Name}">
    <check-icon-sk title="Currently installed."></check-icon-sk>
    <pre><a target=_blank href="${linkToCommit(choice.Hash)}">${shorten(choice.Hash)}</a></pre>
    <pre class=built>${diffDate(choice.Built)}</pre>
    <pre class=userid title="${choice.UserID}">${shorten(choice.UserID)}</pre>
    <span>${choice.Note}</span>
    ${dirtyIndicator(choice)}
  </div>`);

const template = (ele) => html`
  <dialog>
    <h2>Choose a release package to push</h2>
    <select-sk selection="${ele._chosen}" @selection-changed=${ele._selectionChanged}>
      ${listChoices(ele._choices)}
    </select-sk>
    <div class=buttons>
      <button @click=${ele.hide}>Cancel</button>
    </div>
  </dialog>`;

/** <code>push-selection-sk</code> custom element declaration.
 *
 * <p>
 *  Presents a dialog of package choices and generates an event when the user has
 *  made a selection. It is a custom element used by <push-server-sk>.
 * </p>
 *
 * @evt package-change A 'package-change' event is generated when the user
 *   selects a package to push. The event detail has the following shape:
 *
 * <pre>
 * {
 *   name: 'package name goes here', // The full name of the package selected.
 * }
 * </pre>
 */
class PushSelectionSk extends HTMLElement {
  constructor() {
    super()
    this._choices = [];
    this._chosen = -1;
  }

  connectedCallback() {
    upgradeProperty(this, 'choices');
    upgradeProperty(this, 'chosen');
    this._render();
    this._dialog = this.firstElementChild;
    dialogPolyfill.registerDialog(this._dialog);
  }

  _render() {
    render(template(this), this, {eventContext: this});
  }

  /** @prop {Array} The list of packages that are available. Serialized Package from infra/go/packages/. For example:
   *
   * <pre>
   *   {
   *     Name: 'pull:jcgregorio@jcgregorio.cnc.corp.google.com:2014-12-08T02:09:58Z:79f6b17ea316c5d877f4f1e3fa9c7a4ea950916c.deb',
   *     Hash: '79f6b17ea316c5d877f4f1e3fa9c7a4ea950916c',
   *     UserID: 'jcgregorio@jcgregorio.cnc.corp.google.com',
   *     Built: '2014-12-08T02:09:58Z',
   *     Dirty: true,
   *     Note: 'some reason for a push'
   *   },
   * </pre>
   */
  get choices() { return this._choices; }
  set choices(val) {
    this._choices = val;
    this._render();
  }

  /** @prop {number} The index of the chosen package. */
  get chosen() { return this._chosen; }
  set chosen(val) {
    this._chosen = +val;
    this._render();
  }

  _selectionChanged(e) {
    this._chosen = e.detail.selection;
    this.dispatchEvent(new CustomEvent('package-change', {
      detail: {
        name: this.choices[e.detail.selection].Name,
      },
      bubbles: true,
    }));
  }

  /** Show the dialog. */
  show() {
    this._dialog.showModal();
  }

  /** Hide the dialog. */
  hide() {
    this._dialog.close();
  }

}

define('push-selection-sk', PushSelectionSk);