/**
 * @module infra-sk/modules/systemd-unit-status-sk
 * @description <h2><code>systemd-unit-status-sk</code></h2>
 *
 * @attr machine - The name of the machine the service is running on.
 *
 * @evt unit-action - An event triggered when the user wants to perform an action
 *        on the service. The detail of the event has the form:
 *
 * @prop {Object} value - Expected to be a systemd.UnitStatus.
 *
 * <pre>
 *  {
 *    machine: "skia-monitoring",
 *    name: "logserver.service",
 *    action: "start"
 *  }
 * </pre>
 */
import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'

import 'elements-sk/styles/buttons'
import { upgradeProperty } from 'elements-sk/upgradeProperty'

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

const template = (ele) => html`
  <button raised data-action="start"   data-name="${ele.value.status.Name}" @click=${ele._click}>Start  </button>
  <button raised data-action="stop"    data-name="${ele.value.status.Name}" @click=${ele._click}>Stop   </button>
  <button raised data-action="restart" data-name="${ele.value.status.Name}" @click=${ele._click}>Restart</button>
  <div class=uptime>${diffDate(ele.value.props ? +ele.value.props.ExecMainStartTimestamp/1000 : 'n/a')}</div>
  <div class="${ele.value.status.SubState} state">${ele.value.status.SubState}</div>
  <div class=service>${ele.value.status.Name}</div>
`;

define('systemd-unit-status-sk', class extends HTMLElement {
  constructor() {
    super();
    this._value = null;
  }

  connectedCallback() {
    upgradeProperty(this, 'value');
    this._render(this);
  }

  get value() { return this._value; }
  set value(val) {
    this._value = val;
    this._render(this);
  }

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

  _click(e) {
    this.dispatchEvent(new CustomEvent('unit-action', {
      detail: {
        machine: this.getAttribute('machine'),
        name: e.target.dataset.name,
        action: e.target.dataset.action,
      },
      bubbles: true}
    ));
  }
});