/**
 * @file time-display.js
 */
import document from 'global/document' ;
import Component from '../../component.js' ;
import * as Dom from '../../utils/dom.js' ;
import formatTime from '../../utils/format-time.js' ;
import log from '../../utils/log.js' ;

/**
 * Affiche des informations temporelles sur la vidéo
 *
 * @extends Component
 */
class TimeDisplay extends Component {

  /**
   * 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.on(player, ['timeupdate', 'ended'], (e) => this.updateContent(e)) ;
    this.updateTextNode_() ;
  }

  /**
   * Créer l'élément DOM du `Composant`
   *
   * @return {Element}
   *         L'élément qui a été créé.
   */
  createEl() {
    const className = this.buildCSSClass() ;
    const el = super.createEl('div', {
      className : `${className} vjs-time-control vjs-control`
    }) ;
    const span = Dom.createEl('span', {
      className : 'vjs-control-text',
      textContent : `${this.localize(this.labelText_)}\u00a0`
    }, {
      rôle : "présentation
    }) ;

    el.appendChild(span) ;

    this.contentEl_ = Dom.createEl('span', {
      className : `${className}-display`
    }, {
      // indiquer aux lecteurs d'écran de ne pas lire automatiquement l'heure au fur et à mesure qu'elle change
      aria-live" : "off",
      // les éléments span n'ont pas de rôle implicite, mais certains lecteurs d'écran (notamment VoiceOver)
      // les traiter comme une coupure entre les éléments du DOM lors de l'utilisation des touches fléchées
      // (ou de gauche à droite sur iOS) pour lire le contenu d'une page. Utilisation
      // role='presentation' fait en sorte que VoiceOver ne considère pas cette travée comme une rupture.
      rôle" : 'présentation'
    }) ;

    el.appendChild(this.contentEl_) ;
    return el ;
  }

  dispose() {
    this.contentEl_ = null ;
    this.textNode_ = null ;

    super.dispose() ;
  }

  /**
   * Met à jour le nœud de texte d'affichage de l'heure avec une nouvelle heure
   *
   * @param {number} [time=0] l'heure de la mise à jour
   *
   * @private
   */
  updateTextNode_(time = 0) {
    time = formatTime(time) ;

    if (this.formattedTime_ === time) {
      retour ;
    }

    this.formattedTime_ = time ;

    this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
      if (!this.contentEl_) {
        retour ;
      }

      let oldNode = this.textNode_ ;

      if (oldNode && this.contentEl_.firstChild !== oldNode) {
        oldNode = null ;

        log.warn('TimeDisplay#updateTextnode_ : Empêchait le remplacement d'un élément de nœud de texte car il n'était plus un enfant de ce nœud. Ajouter un nouveau nœud à la place.') ;
      }

      this.textNode_ = document.createTextNode(this.formattedTime_) ;

      if (!this.textNode_) {
        retour ;
      }

      if (oldNode) {
        this.contentEl_.replaceChild(this.textNode_, oldNode) ;
      } else {
        this.contentEl_.appendChild(this.textNode_) ;
      }
    }) ;
  }

  /**
   * A remplir dans la classe enfantine, doit mettre à jour l'heure affichée
   * conformément au fait que l'heure actuelle a changé.
   *
   * @param {EventTarget~Event} [event]
   *        L'événement `timeupdate` qui a provoqué l'exécution de ce programme.
   *
   * @listens Player#timeupdate
   */
  updateContent(event) {}
}

/**
 * Texte ajouté à l'affichage de l'heure pour les utilisateurs de lecteurs d'écran.
 *
 * @type {string}
 * @private
 */
TimeDisplay.prototype.labelText_ = 'Time' ;

/**
 * Le texte qui doit s'afficher au-dessus des contrôles `TimeDisplay`. Ajouté pour la localisation.
 *
 * @type {string}
 * @private
 *
 * @deprecated in v7 ; controlText_ n'est pas utilisé dans les composants d'affichage non actifs
 */
TimeDisplay.prototype.controlText_ = 'Time' ;

Component.registerComponent('TimeDisplay', TimeDisplay) ;
exporter le TimeDisplay par défaut ;