import { html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("v-breadcrumbs")
export class VBreadcrumbs extends LitElement {
  // Like "/dir1/dir2/" or "/dir1/dir2/vid1", each of which will make two
  // crumbs: TOP and dir1 (because dir2 appears elsewhere on the page)
  @property() dirPath?: string;

  render() {
    if (this.dirPath == null) return html` dirpath==null `;

    const crumbs = this.getCrumbs();
    return html` <sl-breadcrumb>${crumbs.map((c) => html` <sl-breadcrumb-item><a href=${c.href}>${c.label}</a> </sl-breadcrumb-item> `)}</sl-breadcrumb> `;
  }

  private getCrumbs() {
    if (this.dirPath == null) throw new Error("dirPath is null");
    const segs: Array<string | TemplateResult> = this.dirPath.split("/");
    if (segs[0] != "") {
      throw new Error(`bad path: ${this.dirPath}`);
    }

    segs[0] = html`<sl-icon name="house"></sl-icon> TOP`;
    const tailSegCount = 1;

    const currentPageSegCount = 1;
    segs.splice(segs.length - (tailSegCount + currentPageSegCount), tailSegCount + currentPageSegCount);
    const crumbs = [];
    let cur = "/";
    for (const seg of segs) {
      if (seg !== segs[0]) {
        cur += seg + "/";
      }
      const href = "/video" + cur;
      crumbs.push({ href: href, label: seg });
    }
    return crumbs;
  }
}