import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { Subscriber } from "@supersoniks/concorde/mixins";
import { Marked } from "marked-ts";
import { gfmHeadingId } from "marked-gfm-heading-id";
declare const window: { marked: Marked };
const tagName = "docs-markdown-renderer"; // For Astro.build
const marked = window.marked;
@customElement(tagName)
export class DocsMakdownRenderer extends Subscriber(LitElement) {
  connectedCallback() {
    marked.use(gfmHeadingId());
    this.noShadowDom = "";
    super.connectedCallback();
  }
  @property() anchor = "";
  private _text = "";
  set text(value: string) {
    const html = marked.parse(value);

    this._text = html;
    this.requestUpdate();
    setTimeout(() => {
      const anchor = this.querySelector("#" + this.anchor) as HTMLElement;
      this.appendImport();
      if (anchor) {
        document.documentElement.scrollTop = anchor.offsetTop - 95;
      } else if (!(this.anchor && this.anchor.indexOf("#") != -1)) {
        document.documentElement.scrollTop = 0;
      }
    }, 100);
  }
  get text(): string {
    return this._text;
  }

  appendImport() {
    const locationHash = document.location.hash;
    const isComponent = locationHash.includes("components");

    if (isComponent) {
      const split = locationHash.split("/");
      const componentName = split.filter((name) => name.endsWith(".md")).pop();
      const extractComponentName = componentName?.replace(".md", "");

      const markup = `<sonic-code language="javascript" class="mb-8"
      ><sonic-code language="javascript">
        <template> import '@supersoniks/concorde/${extractComponentName}'; </template>
      </sonic-code>
    </sonic-code>`;
      this.querySelector("h1")?.insertAdjacentHTML("afterend", markup);
    }
  }
  render() {
    return html`${unsafeHTML(this.text)}`;
  }
}