/**
 * @module tree-status-sk
 * @description <h2><code>tree-status-sk</code></h2>
 *
 * <p>
 *   Displays the enter-tree-status-sk and display-tree-status-sk elements.
 *   Handles calls to the backend from events originating from those elements.
 * </p>
 *
 */

import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { errorMessage } from 'elements-sk/errorMessage';
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';

import '../display-tree-status-sk';
import '../enter-tree-status-sk';

import { $$ } from 'common-sk/modules/dom';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';

const template = (ele) => html`
<enter-tree-status-sk .autorollers=${ele._autorollers}></enter-tree-status-sk>
<display-tree-status-sk .statuses=${ele._statuses}></display-tree-status-sk>
`;

define('tree-status-sk', class extends ElementSk {
  constructor() {
    super(template);
    this._statuses = [];
    this._autorollers = [];
  }

  connectedCallback() {
    super.connectedCallback();

    this.addEventListener('new-tree-status', (e) => this._saveStatus(e));
    this.addEventListener('set-tree-status', (e) => this._setTreeStatus(e));

    this._poll();
    this._render();
  }

  _poll() {
    this._getStatuses();
    this._getAutorollers();
    window.setTimeout(() => this._poll(), 10000);
  }

  // Common work done for all fetch requests.
  _doImpl(url, detail, action) {
    fetch(url, {
      body: JSON.stringify(detail),
      headers: {
        'content-type': 'application/json',
      },
      credentials: 'include',
      method: 'POST',
    }).then(jsonOrThrow).then((json) => {
      action(json);
      this._render();
    }).catch((msg) => {
      msg.resp.text().then(errorMessage);
    });
  }

  _saveStatus(e) {
    this._doImpl('/_/add_tree_status', e.detail, (json) => { this._statuses = json; });
  }

  _getStatuses() {
    this._doImpl('/_/recent_statuses', {}, (json) => { this._statuses = json; });
  }

  _getAutorollers() {
    this._doImpl('/_/get_autorollers', {}, (json) => { this._autorollers = json; });
  }

  _setTreeStatus(e) {
    $$('enter-tree-status-sk').status_value = e.detail;
  }
});