import { html, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators.js";
import { Subscriber } from "@supersoniks/concorde/mixins";
import { LocationHandler } from "@supersoniks/concorde/utils";
const tagName = "docs-page"; // For Astro.build
@customElement(tagName)
export class DocsPage extends Subscriber(LitElement) {
  connectedCallback() {
    this.setAttribute(
      "serviceURL",
      document.location.pathname.replace(/\/index.html$/, "")
    );
    this.markDownsURL = this.getAncestorAttributeValue("markDownsURL");
    if (this.markDownsURL.lastIndexOf("/") != this.markDownsURL.length - 1) {
      this.markDownsURL += "/";
    }
    super.connectedCallback();
    LocationHandler.onChange(this);
  }
  @property() location = "";
  markDownsURL = "";
  noShadowDom = "";
  url = "";
  anchor = "";

  willUpdate(changedProperties: PropertyValues) {
    const sharpIdx = this.location.indexOf("#");
    if (sharpIdx) {
      const split = this.location.substring(sharpIdx + 1).split("/");
      this.anchor = decodeURI(split.pop());
      this.url = split.join("/");
    }
    super.willUpdate(changedProperties);
  }

  render() {
    if (!this.url) return nothing;
    return html`
    
        <sonic-fetch noShadowDom dataProvider="pageHTML" endPoint="${
          this.markDownsURL + this.url + "?" + Math.random()
        }">
          <docs-markdown-renderer anchor="${
            this.anchor
          }"></docs-markdown-renderer>
        </sonic-fetch>
      </sonic-fetch>
    `;
  }
}