/**
 * @file mouse-volume-level-display.js
 */
import Component from '../../component.js' ;
import * as Fn from '../../utils/fn.js' ;

import './volume-level-tooltip' ;

/**
 * Le composant {@link MouseVolumeLevelDisplay} suit les mouvements de la souris sur la zone
 * {@link VolumeControl}. Il affiche un indicateur et une {@link VolumeLevelTooltip}
 * indiquant le niveau de volume représenté par un point donné de l'image
 * {@link VolumeBar}.
 *
 * @extends Component
 */
class MouseVolumeLevelDisplay 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ée l'élément DOM pour cette classe.
   *
   * @return {Element}
   *         L'élément qui a été créé.
   */
  createEl() {
    return super.createEl('div', {
      className : 'vjs-mouse-display'
    }) ;
  }

  /**
   * Demande des mises à jour de son propre DOM ainsi que du DOM de ses partenaires
   * {@link VolumeLevelTooltip} enfant.
   *
   * @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) {
    const volume = 100 * rangeBarPoint ;

    this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
      if (vertical) {
        this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px` ;
      } else {
        this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px` ;
      }
    }) ;
  }
}

/**
 * Options par défaut pour `MouseVolumeLevelDisplay`
 *
 * @type {Objet}
 * @private
 */
MouseVolumeLevelDisplay.prototype.options_ = {
  enfants : [
    'volumeLevelTooltip'
  ]
};

Component.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay) ;
exporter l'affichage par défaut MouseVolumeLevelDisplay ;