import {
  Component,
  Input,
  ContentChildren,
  QueryList,
  ElementRef,
  Renderer2,
  Output,
  EventEmitter,
  AfterContentInit,
  AfterViewInit,
  OnDestroy,
  inject,
} from "@angular/core";
import * as InitPxVideo from "accessible-html5-video-player/js/px-video.js";
declare let InitPxVideo: new (config: InitPxVideoConfig) => unknown;

// NOTE: Add px-video.js and strings.js files to your application .angular-cli.json script tag

interface InitPxVideoConfig {
  videoId: string;
  captionsOnDefault: boolean;
  seekInterval: number;
  videoTitle: string;
  debug: boolean;
}

@Component({
  selector: "sam-video-player",
  templateUrl: "./video-player.template.html",
  host: {
    "(document:fullscreenchange)": "onToggleFullScreen($event)",
  },
  standalone: false,
})
export class SamVideoPlayerComponent
  implements AfterContentInit, AfterViewInit, OnDestroy
{
  private render = inject(Renderer2);
  private template = inject(ElementRef);

  @ContentChildren("videoPly", { descendants: true })
  public videos: QueryList<ElementRef>;
  @ContentChildren("videoTrack", { descendants: true })
  public tracks: QueryList<ElementRef>;
  @ContentChildren("videoSrc", { descendants: true })
  public sources: QueryList<ElementRef>;

  @Input() public videoId: string;
  @Input() public title: string;
  @Input() public captionOption: boolean;
  @Input() public seekInterval: number;
  @Output() public onFullScreenChange: EventEmitter<boolean> =
    new EventEmitter<boolean>();
  private config: InitPxVideoConfig;

  ngAfterContentInit() {
    this.validateElement(
      this.videos,
      "SamVideoComponent must be provide a <video> element to function or provide template variable #videoPly"
    );
    this.validateElement(
      this.sources,
      "SamVideoComponent must be provide a <source> element to function or provide template variable #videoSrc"
    );
    this.validateElement(
      this.tracks,
      "SamVideoComponent must be provide a <track> element with captions for 508 compliance or provide template variable #videoTrack"
    );
  }

  ngAfterViewInit() {
    this.config = {
      videoId: this.videoId,
      captionsOnDefault: this.captionOption,
      seekInterval: this.seekInterval ? this.seekInterval : 10,
      videoTitle: this.title ? this.title : "Sam Video",
      debug: true,
    };

    // Initialize video player
    new InitPxVideo(this.config);

    const progressEl = this.template.nativeElement.querySelector("progress");
    const videoEl = this.template.nativeElement.querySelector("video");
    this.setElementAttribute(progressEl, "name", this.videoId);
    this.setElementAttribute(progressEl, "aria-label", "video progress bar");
    this.setElementAttribute(progressEl, "role", "progressbar");
    this.setElementAttribute(videoEl, "name", this.videoId);
    this.setElementAttribute(videoEl, "role", "presentation");
  }

  onToggleFullScreen(event?: Event) {
    void event;
    const isFullScreen = document["fullscreen"];
    this.onFullScreenChange.emit(isFullScreen);
  }

  ngOnDestroy() {
    const pxAnnounceEl = document.getElementById("px-video-aria-announce");
    if (!pxAnnounceEl) {
      return;
    }
    if (typeof pxAnnounceEl.remove === "function") {
      pxAnnounceEl.remove();
    } else if (pxAnnounceEl.parentNode) {
      pxAnnounceEl.parentNode.removeChild(pxAnnounceEl);
    }
  }

  setElementAttribute(el, attName, attValue) {
    this.render.setAttribute(el, attName, attValue);
  }

  validateElement(el: QueryList<ElementRef>, message: string) {
    if (el.length === 0) {
      console.error(message);
    }
  }
}