import { html, render } from 'lit-html'

import 'elements-sk/error-toast-sk'
import { errorMessage } from 'elements-sk/errorMessage'
import { upgradeProperty } from 'elements-sk/upgradeProperty'

import { fromObject } from 'common-sk/modules/query'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'

import 'infra-sk/modules/systemd-unit-status-sk'

const listUnits = (ele) =>  ele._units.map(
  unit => html`<systemd-unit-status-sk machine="${ele._hostname}" .value=${unit}></systemd-unit-status-sk>`
);

const template = (ele) => html`
<header>
  <h1>pulld - ${ele._hostname}</h1>
</header>
<main>
  <div @unit-action=${ele._unitAction}>
    ${listUnits(ele)}
  </div>
</main>
<footer>
  <error-toast-sk></error-toast-sk>
</footer>
`;

// The <pulld-app-sk> custom element declaration.
//
//  Attributes:
//    None
//
//  Properties:
//    None
//
//  Events:
//    None
//
//  Methods:
//    None
//
window.customElements.define('pulld-app-sk', class extends HTMLElement {
  constructor() {
    super();

    // The systemd units, an array of systemd.UnitStatus.
    this._units = [];

    // The hostname of the server.
    this._hostname = '';
  }

  connectedCallback() {
    this._loadData();
  }

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

  _loadData() {
    fetch('/_/list', {
      credentials: 'include',
    }).then(jsonOrThrow).then(json => {
      this._units = json.units;
      this._hostname = json.hostname;
      this._render();
    }).catch(errorMessage);
    this._render();
  }

  _unitAction(e) {
    let params = {
      name: e.detail.name,
      action: e.detail.action,
    }
    fetch('/_/change?' + fromObject(params), {
      credentials: 'include',
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }).then(jsonOrThrow).then(json => {
      errorMessage(e.detail.name + ": " + json.result);
      this._loadData();
    }).catch(errorMessage);
  }

});