import { ToggleButton, ToggleButtonConfig } from './togglebutton';
import { UIInstanceManager } from '../uimanager';
import { PlayerUtils } from '../playerutils';
import { PlayerAPI, PlayerEvent, WarningEvent } from 'bitmovin-player';
import { i18n } from '../localization/i18n';

export interface SubtitleToggleButtonConfig extends ToggleButtonConfig {
  /**
   * Specify whether the player should be set to enter fullscreen by clicking on the subtitle toggle button
   * when initiating the initial subtitle.
   * Default is false.
   */
  defaultEnable?: boolean;
}

/**
 * A button that toggles between subtitle and pause.
 */
export class SubtitleToggleButton extends ToggleButton<SubtitleToggleButtonConfig> {
  protected enableSubtitle: boolean;
  protected firstClick: boolean;

  constructor(config: SubtitleToggleButtonConfig = {}) {
    super(config);

    this.config = this.mergeConfig(
      config,
      {
        cssClass: 'ui-subtitletogglebutton',
        text: i18n.getLocalizer('play'),
        onAriaLabel: i18n.getLocalizer('pause'),
        offAriaLabel: i18n.getLocalizer('play'),
      },
      this.config,
    );

    this.enableSubtitle = false;
    this.firstClick = true;
  }

  configure(
    player: PlayerAPI,
    uimanager: UIInstanceManager,
    handleClickEvent: boolean = true,
  ): void {
    super.configure(player, uimanager);

    if (handleClickEvent) {
      this.onClick.subscribe(() => {
        if (getSubtitle()) {
          subtitleon();
        } else {
          subtitleoff();
        }
      });
    }

    player.on(PlayerEvent.Ready, () => {
      player.subtitles.enable(getSubtitleId());
      this.enableSubtitle = true;
    });

    const subtitleon = () => {
      this.enableSubtitle = true;
      player.subtitles.disable(getSubtitleId());
      this.getDomElement().addClass(this.prefixCss('on'));
      this.getDomElement().removeClass(this.prefixCss('off'));
    };

    const subtitleoff = () => {
      this.enableSubtitle = false;
      player.subtitles.enable(getSubtitleId());
      this.getDomElement().addClass(this.prefixCss('off'));
      this.getDomElement().removeClass(this.prefixCss('on'));
    };

    const getSubtitle = () => {
      const subtitles = player.subtitles.list();
      const current = subtitles.map((element, index) => {
        return element.enabled;
      });
      return current[0];
    };

    const getSubtitleId = () => {
      const subtitles = player.subtitles.list();
      const current = subtitles.map((element, index) => {
        return element.id;
      });
      return current[0];
    };
  }
}