/**
 * @file playback-rate-menu-button.js
 */
import MenuButton from '../../menu/menu-button.js' ;
import PlaybackRateMenuItem de './playback-rate-menu-item.js' ;
import Component from '../../component.js' ;
import * as Dom from '../../utils/dom.js' ;

/**
 * Composant permettant de contrôler la vitesse de lecture.
 *
 * @extends MenuButton
 */
class PlaybackRateMenuButton extends MenuButton {

  /**
   * Crée une instance de cette classe.
   *
   * @param {Player} player
   *        Le `Player` auquel cette classe doit être attachée.
   *
   * @param {Objet} [options]
   *        La mémoire clé/valeur des options du lecteur.
   */
  constructor(player, options) {
    super(player, options) ;

    this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_) ;

    this.updateVisibility() ;
    this.updateLabel() ;

    this.on(player, 'loadstart', (e) => this.updateVisibility(e)) ;
    this.on(player, 'ratechange', (e) => this.updateLabel(e)) ;
    this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e)) ;
  }

  /**
   * Créer l'élément DOM du `Composant`
   *
   * @return {Element}
   *         L'élément qui a été créé.
   */
  createEl() {
    const el = super.createEl() ;

    this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_ ;

    this.labelEl_ = Dom.createEl('div', {
      className : 'vjs-playback-rate-value',
      id : this.labelElId_,
      textContent : '1x'
    }) ;

    el.appendChild(this.labelEl_) ;

    return el ;
  }

  dispose() {
    this.labelEl_ = null ;

    super.dispose() ;
  }

  /**
   * Construit le DOM par défaut `className`.
   *
   * @return {string}
   *         Le `nom de classe` du DOM pour cet objet.
   */
  buildCSSClass() {
    return `vjs-playback-rate ${super.buildCSSClass()}` ;
  }

  buildWrapperCSSClass() {
    return `vjs-playback-rate ${super.buildWrapperCSSClass()}` ;
  }

  /**
   * Créez la liste des éléments du menu. Spécifique à chaque sous-classe.
   *
   */
  createItems() {
    const rates = this.playbackRates() ;
    const items = [] ;

    for (let i = rates.length - 1 ; i >= 0 ; i--) {
      items.push(new PlaybackRateMenuItem(this.player(), {rate : rates[i] + 'x'})) ;
    }

    les articles de retour ;
  }

  /**
   * Mise à jour des attributs d'accessibilité ARIA
   */
  updateARIAAttributes() {
    // Taux de lecture actuel
    this.el().setAttribute('aria-valuenow', this.player().playbackRate()) ;
  }

  /**
   * Cette fonction est appelée lorsqu'un `PlaybackRateMenuButton` est "cliqué". Voir
   * {@link ClickableComponent} pour des informations plus détaillées sur ce que peut être un clic.
   *
   * @param {EventTarget~Event} [event]
   *        L'événement `keydown`, `tap` ou `click` qui a provoqué l'activation de cette fonction est le suivant
   *        appelé.
   *
   * @listens tap
   * @listens click
   */
  handleClick(event) {
    // sélectionner l'option tarifaire suivante
    const currentRate = this.player().playbackRate() ;
    const rates = this.playbackRates() ;
    const currentIndex = rates.indexOf(currentRate) ;
    // ceci permet d'obtenir le taux suivant et de sélectionner le premier si le dernier est déjà sélectionné
    const newIndex = (currentIndex + 1) % rates.length ;

    this.player().playbackRate(rates[newIndex]) ;
  }

  /**
   * Sur playbackrateschange, mettez à jour le menu pour prendre en compte les nouveaux éléments.
   *
   * @listens Player#playbackrateschange
   */
  handlePlaybackRateschange(event) {
    this.update() ;
  }

  /**
   * Obtenir les taux de lecture possibles
   *
   * @return {Array}
   *         Toutes les vitesses de lecture possibles
   */
  playbackRates() {
    const player = this.player() ;

    return (player.playbackRates && player.playbackRates()) || [] ;
  }

  /**
   * Déterminer si les taux de lecture sont pris en charge par la technologie
   * et un tableau de taux de lecture existe
   *
   * @return {boolean}
   *         Si la modification de la vitesse de lecture est prise en charge
   */
  playbackRateSupported() {
    return this.player().tech_ &&
      this.player().tech_.featuresPlaybackRate &&
      this.playbackRates() &&
      this.playbackRates().length > 0
    ;
  }

  /**
   * Cacher les contrôles de vitesse de lecture lorsqu'il n'y a pas d'options de vitesse de lecture à sélectionner
   *
   * @param {EventTarget~Event} [event]
   *        L'événement qui a provoqué l'exécution de cette fonction.
   *
   * @listens Player#loadstart
   */
  updateVisibility(event) {
    if (this.playbackRateSupported()) {
      this.removeClass('vjs-hidden') ;
    } else {
      this.addClass('vjs-hidden') ;
    }
  }

  /**
   * Mise à jour de l'étiquette du bouton en cas de changement de taux
   *
   * @param {EventTarget~Event} [event]
   *        L'événement qui a provoqué l'exécution de cette fonction.
   *
   * @listens Player#ratechange
   */
  updateLabel(event) {
    if (this.playbackRateSupported()) {
      this.labelEl_.textContent = this.player().playbackRate() + 'x' ;
    }
  }

}

/**
 * Le texte qui doit s'afficher au-dessus des contrôles `FullscreenToggle`s. Ajouté pour la localisation.
 *
 * @type {string}
 * @private
 */
PlaybackRateMenuButton.prototype.controlText_ = 'Taux de lecture' ;

Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton) ;
exporter le bouton de menu PlaybackRate par défaut ;