/**
 * @module named-fiddle-sk
 * @description <h2><code>named-fiddle-sk</code></h2>
 *
 *   Represents a single named fiddle with controls
 *   for manipulating it.
 *
 * @evt named-edit - Sent when the user presses the edit button.
 *   The event detail will be the current state of the named
 *   fiddle.
 *
 * @evt named-delete - Sent when the user presses the delete button.
 *   The event detail will be the current state of the named
 *   fiddle.
 *
 */
import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import 'elements-sk/styles/buttons'

function statusValue(ele) {
  return ele._state.status !== ''  ? 'Failed' : '';
}

function statusClass(ele) {
  return ele._inflight ? 'inflight' : 'status';
}

const template = (ele) => html`<span class=name><a href='https://fiddle.skia.org/c/${ele._state.hash}'>${ele._state.name}</a></span>
  <span class=${statusClass(ele)} title=${ele._state.status}>${statusValue(ele)}</span>
  <button @click=${ele._editClick}>Edit</button>
  <button @click=${ele._deleteClick}>Delete</button>
  <span class=user>${ele._state.user}</span>
`;

define('named-fiddle-sk', class extends HTMLElement {
  constructor() {
    super();
    this._state = {
      name: '',
      status: '',
      hash: '',
      user: '',
    };
    this._inflight = false;
  }

  _editClick() {
    let detail = Object.assign({}, this._state);
    this.dispatchEvent(new CustomEvent('named-edit', { detail: detail, bubbles: true }));
  }

  _deleteClick() {
    let detail = Object.assign({}, this._state);
    this.dispatchEvent(new CustomEvent('named-delete', { detail: detail, bubbles: true }));
  }


  /** @prop state {object} A serialized Named struct.  */
  get state() { return this._state }
  set state(val) {
    this._state = val;
    this._render();
  }

  /** @prop inflight {Boolean} Is there a request inflight to determine if this fiddle is still invalid.  */
  get inflight() { return this._inflight }
  set inflight(val) {
    this._inflight = val;
    this._render();
  }

  connectedCallback() {
    this._render();
  }

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

});