import { customElement, DeesElement, html, TemplateResult } from '@designestate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'dees-editormarkdownoutlet': DeesEditorMarkdownOutlet;
  }
}

@customElement('dees-editormarkdownoutlet')
export class DeesEditorMarkdownOutlet extends DeesElement {
  // DEMO
  public static demo = () => html`<dees-editormarkdownoutlet></dees-editormarkdownoutlet>`;

  // INSTANCE
  private outlet: HTMLElement;

  public render(): TemplateResult {
    return html`
      <div class="outlet markdown-body">
        <h1>Hi there</h1>
      </div>
    `;
  }

  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    await super.firstUpdated(_changedProperties);
    const styleElement = document.createElement('style');
    const cssText = await (
      await fetch('https://unpkg.com/github-markdown-css@5.1.0/github-markdown-dark.css')
    ).text();
    styleElement.textContent = cssText;
    this.shadowRoot.append(styleElement);
  }

  public async updateHtmlText(htmlTextArg: string) {
    await this.updateComplete;
    if (!this.outlet) {
      this.outlet = this.shadowRoot.querySelector('.outlet');
    }
    this.outlet.innerHTML = htmlTextArg;
  }
}