/**
 * @file volume-level-tooltip.js
 */
import Component from '../../component' ;
import * as Dom from '../../utils/dom.js' ;
import * as Fn from '../../utils/fn.js' ;

/**
 * Les infobulles de niveau de volume affichent un volume au-dessus ou à côté de la barre de volume.
 *
 * @extends Component
 */
class VolumeLevelTooltip extends Component {

  /**
   * Crée une instance de cette classe.
   *
   * @param {Player} player
   *        Le {@link 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.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL) ;
  }

  /**
   * Créer l'élément DOM de l'info-bulle du volume
   *
   * @return {Element}
   *         L'élément qui a été créé.
   */
  createEl() {
    return super.createEl('div', {
      className : 'vjs-volume-tooltip'
    }, {
      aria-hidden" : "true" (vrai)
    }) ;
  }

  /**
   * Met à jour la position de l'info-bulle par rapport à la `VolumeBar` et à la `VolumeBar`
   * son texte de contenu.
   *
   * @param {Object} rangeBarRect
   *        Le `ClientRect` de l'élément {@link VolumeBar}.
   *
   * @param {number} rangeBarPoint
   *        Un nombre compris entre 0 et 1, représentant un point de référence horizontal/vertical
   *        à partir du bord gauche de la {@link VolumeBar}
   *
   * @param {boolean} vertical
   *        Les arbitres au poste de contrôle du volume
   *        dans la barre de contrôle{@link VolumeControl}
   *
   */
  update(rangeBarRect, rangeBarPoint, vertical, content) {
    if (!vertical) {
      const tooltipRect = Dom.getBoundingClientRect(this.el_) ;
      const playerRect = Dom.getBoundingClientRect(this.player_.el()) ;
      const volumeBarPointPx = rangeBarRect.width * rangeBarPoint ;

      if (!playerRect || !tooltipRect) {
        retour ;
      }

      const spaceLeftOfPoint = (rangeBarRect.left - playerRect.left) + volumeBarPointPx ;
      const spaceRightOfPoint = (rangeBarRect.width - volumeBarPointPx) +
        (playerRect.right - rangeBarRect.right) ;
      let pullTooltipBy = tooltipRect.width / 2 ;

      if (spaceLeftOfPoint < pullTooltipBy) {
        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint ;
      } else if (spaceRightOfPoint < pullTooltipBy) {
        pullTooltipBy = spaceRightOfPoint ;
      }

      if (pullTooltipBy < 0) {
        pullTooltipBy = 0 ;
      } else if (pullTooltipBy > tooltipRect.width) {
        pullTooltipBy = tooltipRect.width ;
      }

      this.el_.style.right = `-${pullTooltipBy}px` ;
    }
    this.write(`${contenu}%`) ;
  }

  /**
   * Inscrire le volume dans l'élément DOM de l'infobulle.
   *
   * @param {string} content
   *        Le volume formaté pour l'infobulle.
   */
  write(content) {
    Dom.textContent(this.el_, content) ;
  }

  /**
   * Met à jour la position de l'info-bulle du volume par rapport à la `VolumeBar`.
   *
   * @param {Object} rangeBarRect
   *        Le `ClientRect` de l'élément {@link VolumeBar}.
   *
   * @param {number} rangeBarPoint
   *        Un nombre compris entre 0 et 1, représentant un point de référence horizontal/vertical
   *        à partir du bord gauche de la {@link VolumeBar}
   *
   * @param {boolean} vertical
   *        Les arbitres au poste de contrôle du volume
   *        dans la barre de contrôle{@link VolumeControl}
   *
   * @param {number} volume
   *        Le niveau de volume pour lequel l'info-bulle doit être mise à jour
   *
   * @param {Fonction} cb
   *        Une fonction qui sera appelée pendant l'image d'animation de la demande
   *        pour les infobulles qui ont besoin d'animations supplémentaires par rapport à l'animation par défaut
   */
  updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
    this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
      this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0)) ;
      if (cb) {
        cb() ;
      }
    }) ;
  }
}

Component.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip) ;
export default VolumeLevelTooltip ;