/**
 * @module modules/commit-detail-picker-sk
 * @description <h2><code>commit-detail-picker-sk</code></h2>
 *
 * @evt 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,
 *      },
 *
 * @attr {Number} selected - The index of the selected commit.
 *
 */

import '../commit-detail-panel-sk';
import 'elements-sk/styles/buttons';

import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import dialogPolyfill from 'dialog-polyfill';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { Commit } from '../json';
import { CommitDetailPanelSkCommitSelectedDetails } from '../commit-detail-panel-sk/commit-detail-panel-sk';

const NO_COMMIT_SELECTED_MSG = 'Choose a commit.';

export class CommitDetailPickerSk extends ElementSk {
  private _details: Commit[];

  private _dialog: HTMLDialogElement | null = null;

  constructor() {
    super(CommitDetailPickerSk.template);
    this._details = [];
  }

  private static _titleFrom = (ele: CommitDetailPickerSk) => {
    const index = ele.selected;
    if (index === -1) {
      return NO_COMMIT_SELECTED_MSG;
    }
    const d = ele._details[index];
    if (!d) {
      return NO_COMMIT_SELECTED_MSG;
    }
    return `${d.author} -  ${d.message}`;
  };

  private static template = (ele: CommitDetailPickerSk) => html`
    <button @click=${ele._open}>${CommitDetailPickerSk._titleFrom(ele)}</button>
    <dialog>
      <commit-detail-panel-sk
        @commit-selected="${ele._panelSelect}"
        .details="${ele._details}"
        selectable
        selected=${ele.selected}
      ></commit-detail-panel-sk>
      <button @click=${ele._close}>Close</button>
    </dialog>
  `;


  connectedCallback(): void {
    super.connectedCallback();
    this._upgradeProperty('details');
    this._render();
    this._dialog = this.querySelector('dialog')!;
    dialogPolyfill.registerDialog(this._dialog);
  }

  attributeChangedCallback(): void {
    this._render();
  }

  private _panelSelect(e: Event) {
    this.selected = (e as CustomEvent<
      CommitDetailPanelSkCommitSelectedDetails
    >).detail.selected;
    this._render();
  }

  private _close() {
    this._dialog!.close();
    this._render();
  }

  private _open() {
    this._dialog!.showModal();
    this._render();
  }

  static get observedAttributes(): string[] {
    return ['selected'];
  }

  /** Mirrors the selected attribute. */
  get selected(): number {
    return +(this.getAttribute('selected') || '-1');
  }

  set selected(val: number) {
    this.setAttribute('selected', `${val}`);
  }


  /** An array of serialized cid.CommitDetail. */
  get details(): Commit[] {
    return this._details;
  }

  set details(val: Commit[]) {
    this._details = val;
    this._render();
  }
}

define('commit-detail-picker-sk', CommitDetailPickerSk);