/**
 * @module autoroll/modules/arb-table-sk
 * @description <h2><code>arb-table-sk</code></h2>
 *
 * <p>
 * This element displays the list of active Autorollers.
 * </p>
 */

import { html } from 'lit-html';
import { $$ } from 'common-sk/modules/dom';
import { define } from 'elements-sk/define';
import 'elements-sk/styles/table';

import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import {
  AutoRollMiniStatus,
  AutoRollService,
  GetAutoRollService,
  GetRollersResponse,
} from '../rpc';

export class ARBTableSk extends ElementSk {
  private static template = (ele: ARBTableSk) => html`
  <div>
    Filter: <input id="filter" type="text" @input="${
      ele.updateFiltered
    }"></input>
  </div>
  <table>
    <tr>
      <th>Roller ID</th>
      <th>Current Mode</th>
      <th>Num Behind</th>
      <th>Num Failed</th>
    </tr>
    ${ele.filtered.map(
      (st) => html`
        <tr>
          <td>
            <a href="/r/${st.rollerId}"
              >${st.childName} into ${st.parentName}</a
            >
          </td>
          <td>${st.mode.toLowerCase()}</td>
          <td>${st.numBehind}</td>
          <td>${st.numFailed}</td>
        </tr>
      `
    )}
  </table>
`;
  private rollers: AutoRollMiniStatus[] = [];
  private filtered: AutoRollMiniStatus[] = [];
  private rpc: AutoRollService;

  constructor() {
    super(ARBTableSk.template);
    this.rpc = GetAutoRollService(this);
  }

  connectedCallback() {
    super.connectedCallback();
    this.reload();
  }

  private reload() {
    this.rpc.getRollers({}).then((resp: GetRollersResponse) => {
      this.rollers = resp.rollers!;
      this.updateFiltered();
    });
  }

  private updateFiltered() {
    this.filtered = this.rollers;
    const filterInput = $$<HTMLInputElement>('#filter', this);
    if (!!filterInput && !!filterInput.value) {
      const regex = new RegExp(filterInput!.value);
      this.filtered = this.rollers.filter((st: AutoRollMiniStatus) => {
        return (
          st.rollerId.match(regex) ||
          st.childName.match(regex) ||
          st.parentName.match(regex)
        );
      });
    }
    this._render();
  }
}

define('arb-table-sk', ARBTableSk);