export class FullScreenHandler {
  public constructor(
    private readonly toggleButton: HTMLElement,
    target: HTMLElement
  ) {
    if (!document.fullscreenEnabled || typeof target.requestFullscreen !== 'function') {
      toggleButton.hidden = true;
      return;
    }

    this.updateButtons();

    addEventListener('fullscreenchange', this.updateButtons.bind(this));
    toggleButton.addEventListener('click', () => {
      if (FullScreenHandler.isInFullScreenMode()) {
        void document.exitFullscreen();
        return;
      }

      void target.requestFullscreen().catch(() => undefined);
    });
  }

  public static isInFullScreenMode(): boolean {
    return document.fullscreenElement !== null;
  }

  private updateButtons(): void {
    const isInFullScreenMode = FullScreenHandler.isInFullScreenMode();
    const label = isInFullScreenMode ? 'Exit fullscreen' : 'Enter fullscreen';
    this.toggleButton.classList.toggle('active', isInFullScreenMode);
    this.toggleButton.setAttribute('aria-label', label);
    this.toggleButton.title = label;
  }
}