import { LitElement, html, css, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators.js";
import "shaka-video-element";

interface CustomVideoElement extends HTMLVideoElement {}

export interface ShakaVideoElement extends CustomVideoElement {}

@customElement("page-player")
export class PagePlayer extends LitElement {
  @property({ type: String }) manifest: string | undefined;
  @property({ type: String }) size: "hidden" | "big" | "full" = "hidden";
  player!: Element;
  static styles = [
    css`
      div {
        z-index: 2;
        position: fixed;
      }
      div.full {
        inset: 0;
      }
      div.big {
        inset: 5em;
        background: #2c2c2c;
      }
      div.hidden {
        display: none;
      }
      shaka-video {
        width: 100%;
        height: 100%;
      }
    `,
  ];

  updated(oldVals: PropertyValues<this>) {
    if (oldVals.get("size")) {
      if (this.size == "hidden") {
        const player = this.shadowRoot!.querySelector("shaka-video")! as ShakaVideoElement;
        player.pause();
      } else if (this.size == "big") {
      } else if (this.size == "full") {
      }
    }
  }
  render() {
    return html`
      <div class="${this.size}">
        <shaka-video src="${this.manifest}" controls></video>
      </div>
    `;
  }
}