/**
 * @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 is of type SystemdUnitStatusSkEventDetail, e.g.:
 *
 * <pre>
 *  {
 *    machine: "skia-monitoring",
 *    name: "logserver.service",
 *    action: "start"
 *  }
 * </pre>
 */
import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'

import { SystemdUnitStatus } from './json';

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

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

export interface SystemdUnitStatusSkEventDetail {
  machine: string,
  name: string,
  action: string,
}

export class SystemdUnitStatusSk extends HTMLElement {
  private static template = (ele: SystemdUnitStatusSk) => html`
    <button raised data-action="start"   data-name="${ele.value!.status!.Name}" @click=${ele.onClick}>Start  </button>
    <button raised data-action="stop"    data-name="${ele.value!.status!.Name}" @click=${ele.onClick}>Stop   </button>
    <button raised data-action="restart" data-name="${ele.value!.status!.Name}" @click=${ele.onClick}>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>
  `;

  private _value: SystemdUnitStatus | null = null;

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

  get value(): SystemdUnitStatus | null { return this._value; }
  set value(val: SystemdUnitStatus | null) {
    this._value = val;
    this.render();
  }

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

  private onClick(e: MouseEvent) {
    const target = e.target as HTMLButtonElement;
    this.dispatchEvent(new CustomEvent<SystemdUnitStatusSkEventDetail>('unit-action', {
      detail: {
        machine: this.getAttribute('machine'),
        name: target.dataset.name,
        action: target.dataset.action,
      } as SystemdUnitStatusSkEventDetail,
      bubbles: true}
    ));
  }
}

define('systemd-unit-status-sk', SystemdUnitStatusSk);