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

interface VideoFile {
  webRelPath: string;
  label: string;
}
interface Subdir {
  label: string;
  path: string;
}

function subdirQuery(subdir: string): string {
  return "subdir=" + encodeURIComponent(subdir);
}

@customElement("video-page")
export class VideoPage extends LitElement {
  videos: VideoFile[];
  subdirs: Subdir[];
  @property() pathSegs: { label: string; subdir: string }[];
  constructor() {
    super();
    this.videos = [];
    this.subdirs = [];
    this.pathSegs = [];
    this.loadVideos();
  }
  updatePathSegs(subdir: string) {
    this.pathSegs = [{ label: "TOP", subdir: "/" }];
    if (subdir != "/") {
      let acc = "";
      const segs = subdir.split("/");
      segs.splice(0, 1); // the root
      for (let seg of segs) {
        acc += "/" + seg;
        this.pathSegs.push({ label: seg, subdir: acc });
      }
    }
  }
  async loadVideos() {
    const u = new URL(location.href);
    const subdir = u.searchParams.get("subdir") || "/";
    this.updatePathSegs(subdir);
    const resp = await (await fetch("api/videos?" + subdirQuery(subdir))).json();
    this.videos = resp.videos as VideoFile[];
    this.subdirs = resp.subdirs as Subdir[];
    this.requestUpdate();
  }
  static styles = [
    css`
      a {
        color: white;
        font-size: 20px;
      }
      #path-segs > span {
        color: white;
        padding: 11px;
        display: inline-block;
        background: #4ea1bd21;
        margin: 5px;
        border-top-left-radius: 29px;
      }
      #path-segs > span:after {
        content: " >";
        font-size: 33px;
        vertical-align: middle;
        color: gray;
      }
      .subdir {
        vertical-align: top;
        color: white;
        padding: 11px;
        display: inline-block;
        width: 300px;
        background: #4ea1bd21;
        margin: 5px;
        border-bottom-right-radius: 29px;
      }
    `,
  ];
  // allow only 1 to play. embiggen like pbskids does.
  render() {
    return html`
      <div id="path-segs">${this.pathSegs.map((seg) => html`<span><a href="./?${subdirQuery(seg.subdir)}">${seg.label}</a></span>`)}</div>

      ${this.subdirs.map((s) => html`<div class="subdir"><a href="${"./?" + subdirQuery(s.path)}">${s.label}</a></div>`)}
      ${this.videos.map((v) => html`<video-section title="${v.label}" manifest=${v.webRelPath}></video-section>`)}
    `;
  }
}