/**
 * @module autoroll/modules/arb-config-sk
 * @description <h2><code>arb-config-sk</code></h2>
 *
 * <p>
 * This element provides UI for editing the configuration of a roller.
 * </p>
 */

import { html } from 'lit-html';

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

import { define } from '../../../elements-sk/modules/define';
import '../../../elements-sk/modules/tabs-panel-sk';
import '../../../elements-sk/modules/tabs-sk';

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

import { Config } from '../config';

import { AutoRollService, GetAutoRollService } from '../rpc';

const inputID = 'configInput';

export class ARBConfigSk extends ElementSk {
  private static template = (ele: ARBConfigSk) =>
    !ele.config
      ? html``
      : html`
  <div>
    <button
      @click="${() => {
        $$<HTMLTextAreaElement>(`#${inputID}`, ele)!.value = ele.configJSON;
      }}"
      title="Revert to the checked-in config."
      >Revert</button>
    <button
      @click="${() => ele.submit()}"
      title="Update the roller config."
    >Submit</button>
  </div>
  <div>
    <textarea
      id="${inputID}"
      label="Edit the roller config."
      rows=${ele.configJSON.split('\n').length}
      cols=120
      >${ele.configJSON}</textarea>
  </div>
  <div style="display:none">
    <form id="configForm" action="/config" method="post">
      <textarea id="configJson" name="configJson"></textarea>
    </form>
  </form>
`;

  private config: Config = {} as Config;

  private configJSON: string = '';

  private rpc: AutoRollService = GetAutoRollService(this);

  constructor() {
    super(ARBConfigSk.template);
  }

  connectedCallback() {
    super.connectedCallback();
    const params = new URLSearchParams(window.location.search);
    const rollerName = params.get('roller');
    if (rollerName) {
      this.loadConfig(rollerName);
    }
    this._render();
  }

  private loadConfig(roller: string) {
    console.log(`Loading config for ${roller}...`);

    fetch(`/r/${roller}/config`)
      .then(jsonOrThrow)
      .then((cfg: Config) => {
        this.config = cfg;
        this.configJSON = JSON.stringify(this.config, null, 2);
        this._render();
      });
  }

  private submit() {
    // TODO(borenet): This is goofy because we have two textareas which both
    // contain the config in JSON format, but eventually we'll have UI for
    // editing the config.
    const configJSON = $$<HTMLTextAreaElement>(`#${inputID}`, this)!.value;
    const config = JSON.parse(configJSON) as Config;
    $$<HTMLTextAreaElement>('#configJson', this)!.value = configJSON;
    $$<HTMLFormElement>('#configForm', this)!.submit();
  }
}

define('arb-config-sk', ARBConfigSk);