/**
 * default base ui
 *
 * author: db123 at db
 * creation: 24/4/2026
 */

import { VP } from '../core';
import { EventManager } from '../events';

export class BaseUI {
  private player: VP;
  private video: HTMLVideoElement;
  private prefixClass: string;
  private events: EventManager;
  private wrapper!: HTMLElement;
  private controlsWrap!: HTMLElement;
  private originalParent!: Node;
  private nextSibling: ChildNode | null = null;

  constructor(player: VP, video: HTMLVideoElement, prefixClass: string = 'vp') {
    this.player = player;
    this.video = video;
    this.prefixClass = prefixClass;
    this.events = new EventManager();
    this.build();
    this.createPlayButton();
  }

  private build(): void {
    const wrapper = document.createElement('div');
    wrapper.className = this.prefixClass + '-wrapper';
    const controlsWrap = document.createElement('div');
    controlsWrap.className = this.prefixClass + '-controls';

    const videoParent = this.video.parentNode;
    if (!videoParent) {
      throw new Error(`Video parent element not found.`);
    }

    this.wrapper = wrapper;
    this.controlsWrap = controlsWrap;
    this.originalParent = videoParent!;

    if (this.video.nextSibling) {
      this.nextSibling = this.video.nextSibling;
    }

    videoParent.insertBefore(wrapper, this.video);
    wrapper.appendChild(this.video);
    wrapper.appendChild(controlsWrap);
  }

  destroy(): void {
    this.originalParent.insertBefore(this.video, this.nextSibling);
    this.wrapper.remove();
    this.events.removeAll();
  }

  private createPlayButton(): void {
    const playButton = document.createElement('button');
    playButton.className = this.prefixClass + '-playButton';
    if (this.video.paused) {
      playButton.innerText = 'play';
    } else {
      playButton.innerText = 'pause';
    }

    this.events.add(this.video, 'play', function (): void {
      playButton.innerText = 'pause';
    });
    this.events.add(this.video, 'pause', function (): void {
      playButton.innerText = 'play';
    });

    playButton.onclick = (): void => {
      if (this.video.paused) {
        this.player.play();
      } else {
        this.player.pause();
      }
    };

    this.controlsWrap.appendChild(playButton);
  }
}