/**
 * @module modules/test-src-sk
 * @description <h2><code>test-src-sk</code></h2>
 *
 *  Displays text loaded from a URL in the same way an image loads and displays
 *  from a URL.
 *
 */
import { html } from 'lit/html.js';
import { define } from '../../../elements-sk/modules/define';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';

export class TestSrcSk extends ElementSk {
  // The retrieved text.
  private _text: string = '';

  // The URL to retrieve the text from.
  private _src: string = '';

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

  private static template = (ele: TestSrcSk) => html`<pre class="output">${ele._text}</pre>`;

  connectedCallback(): void {
    super.connectedCallback();
    this._upgradeProperty('src');
  }

  /** @prop src - URL to retrieve the text from. */
  get src(): string {
    return this._src;
  }

  set src(val: string) {
    if (val === '') {
      return;
    }
    this._src = val;
    fetch(val)
      .then((resp) => {
        if (!resp.ok) {
          throw new Error(`Failed to retrieve text from ${val}`);
        }
        return resp.text();
      })
      .then((text) => {
        this._text = text;
        this._render();
        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
      });
  }
}

define('test-src-sk', TestSrcSk);