/**
 * @file menu-item.js
 */
import ClickableComponent de '../clickable-component.js' ;
import Component from '../component.js' ;
import {assign} from '../utils/obj' ;
import {MenuKeys} from './menu-keys.js' ;
import keycode from 'keycode' ;
import {createEl} from '../utils/dom.js' ;

/**
 * Le composant d'un élément de menu. `<li>`
 *
 * @extends ClickableComponent
 */
class MenuItem extends ClickableComponent {

  /**
   * 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.selectable = options.selectable ;
    this.isSelected_ = options.selected || false ;
    this.multiSelectable = options.multiSelectable ;

    this.selected(this.isSelected_) ;

    if (this.selectable) {
      if (this.multiSelectable) {
        this.el_.setAttribute('role', 'menuitemcheckbox') ;
      } else {
        this.el_.setAttribute('role', 'menuitemradio') ;
      }
    } else {
      this.el_.setAttribute('role', 'menuitem') ;
    }
  }

  /**
   * Créer l'élément DOM `MenuItem
   *
   * @param {string} [type=li]
   *        Type de noeud de l'élément, non utilisé, toujours fixé à `li`.
   *
   * @param {Objet} [props={}]
   *        Un objet de propriétés à définir sur l'élément
   *
   * @param {Objet} [attrs={}]
   *        Un objet d'attributs à définir sur l'élément
   *
   * @return {Element}
   *         L'élément qui est créé.
   */
  createEl(type, props, attrs) {
    // Le contrôle est textuel, pas seulement une icône
    this.nonIconControl = true ;

    const el = super.createEl('li', assign({
      className : 'vjs-menu-item',
      tabIndex : -1
    }, props), attrs) ;

    // remplacer l'icône par le texte de l'élément de menu.
    el.replaceChild(createEl('span', {
      className : 'vjs-menu-item-text',
      textContent : this.localize(this.options_.label)
    }), el.querySelector('.vjs-icon-placeholder')) ;

    return el ;
  }

  /**
   * Ignore les touches utilisées par le menu, mais transmet toutes les autres. Voir
   * {@link ClickableComponent#handleKeyDown} pour les cas où cette fonction est appelée.
   *
   * @param {EventTarget~Event} event
   *        L'événement `keydown` qui a provoqué l'appel de cette fonction.
   *
   * @listens keydown
   */
  handleKeyDown(event) {
    if (!MenuKeys.some((key) => keycode.isEventKey(event, key))) {
      // Transmettre la gestion des touches inutilisées vers le haut
      super.handleKeyDown(event) ;
    }
  }

  /**
   * Tout clic sur un `MenuItem` le met dans l'état sélectionné.
   * Voir {@link ClickableComponent#handleClick} pour les instances où cette fonction est appelée.
   *
   * @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) {
    this.selected(true) ;
  }

  /**
   * Définit l'état de cet élément de menu comme étant sélectionné ou non.
   *
   * @param {boolean} selected
   *        si l'élément de menu est sélectionné ou non
   */
  selected(selected) {
    if (this.selectable) {
      if (selected) {
        this.addClass('vjs-selected') ;
        this.el_.setAttribute('aria-checked', 'true') ;
        // aria-checked n'est pas entièrement pris en charge par les navigateurs/lecteurs d'écran,
        // pour indiquer l'état sélectionné au lecteur d'écran dans le texte de contrôle.
        this.controlText(', sélectionné') ;
        this.isSelected_ = true ;
      } else {
        this.removeClass('vjs-selected') ;
        this.el_.setAttribute('aria-checked', 'false') ;
        // Indiquer l'état non sélectionné au lecteur d'écran
        this.controlText('') ;
        this.isSelected_ = false ;
      }
    }
  }
}

Component.registerComponent('MenuItem', MenuItem) ;
exporter l'élément de menu par défaut ;