/**
 * @archivo menu-item.js
 * /
importar ClickableComponent desde '../clickable-component.js';
importar componente desde '../component.js';
importar {asignar} desde '../utils/obj';
importar {MenuKeys} desde './menu-keys.js';
importar código clave desde 'código clave';
importar {createEl} desde '../utils/dom.js';

/**
 * El componente de un elemento de menú. `< li> `
 *
 * @extiende Componente que se puede hacer clic
 * /
clase MenuItem extiende ClickableComponent {

  /**
   * Crea una instancia de esta clase.
   *
   * @param {Jugador} jugador
   * El `Jugador` al que se debe adjuntar esta clase.
   *
   * @param {Objeto} [opciones={}]
   * El almacén de clave/valor de las opciones del jugador.
   *
   * /
  constructor(jugador, opciones) {
    super(jugador, opciones);

    this.seleccionable = opciones.seleccionable;
    this.isSelected_ = opciones.seleccionado || FALSO;
    this.multiSelectable = options.multiSelectable;

    this.selected(this.isSelected_);

    if (esto.seleccionable) {
      if (esto.multiseleccionable) {
        this.el_.setAttribute('rol', 'menuitemcheckbox');
      } else {
        this.el_.setAttribute('rol', 'menuitemradio');
      }
    } else {
      this.el_.setAttribute('rol', 'menuitem');
    }
  }

  /**
   * Crear el elemento DOM de `MenuItem
   *
   * @param {cadena} [tipo=li]
   * El tipo de nodo del elemento, que no se usa realmente, siempre se establece en `li`.
   *
   * @param {Objeto} [props={}]
   * Un objeto de propiedades que debe establecerse en el elemento
   *
   * @param {Objeto} [atributos={}]
   * Un objeto de atributos que debe establecerse en el elemento
   *
   * @return {Elemento}
   * El elemento que se crea.
   * /
  createEl(tipo, accesorios, atributos) {
    // El control es textual, no solo un icono
    this.nonIconControl = verdadero;

    const el = super.createEl('li', asigna({
      className: 'vjs-menú-elemento',
      índice de tabulación: -1
    }, accesorios), atributos);

    // icono de intercambio con el texto del elemento del menú.
    el.replaceChild(createEl('span', {
      className: 'vjs-menu-elemento-texto',
      textContent: this.localize(this.options_.label)
    }), el.querySelector('.vjs-icon-placeholder'));

    volver el;
  }

  /**
   * Ignore las teclas que se utilizan en el menú, pero pase por alto cualquier otra. Ver
   * {@link ClickableComponent#handleKeyDown} para instancias donde se llama esto.
   *
   * @param {EventTarget~Evento} evento
   * El evento `keydown` que hizo que se llamara a esta función.
   *
   * @escucha tecla abajo
   * /
  handleKeyDown(evento) {
    if (!MenuKeys.some((clave) => keycode.isEventKey(evento, clave))) {
      // Pase el manejo de keydown para claves no utilizadas
      super.handleKeyDown(evento);
    }
  }

  /**
   * Cualquier clic en un `MenuItem` lo pone en el estado seleccionado.
   * Consulte {@link ClickableComponent#handleClick} para conocer las instancias en las que se llama.
   *
   * @param {EventTarget~Evento} evento
   * El evento `keydown`, `top` o `click` que hizo que esta función se desactivara
   * llamado.
   *
   * @escucha toca
   * @escucha clic
   * /
  handleClick(evento) {
    esto.seleccionado(verdadero);
  }

  /**
   * Establecer el estado de este elemento de menú como seleccionado o no.
   *
   * @param {booleano} seleccionado
   * si el elemento del menú está seleccionado o no
   * /
  seleccionado (seleccionado) {
    if (esto.seleccionable) {
      si (seleccionado) {
        this.addClass('vjs-seleccionado');
        this.el_.setAttribute('aria-checked', 'true');
        // aria-checked no es totalmente compatible con navegadores/lectores de pantalla,
        // así que indique el estado seleccionado al lector de pantalla en el texto de control.
        this.controlText(', seleccionado');
        this.isSelected_ = verdadero;
      } else {
        this.removeClass('vjs-seleccionado');
        this.el_.setAttribute('aria-checked', 'false');
        // Indicar estado no seleccionado al lector de pantalla
        este.controlText('');
        this.isSelected_ = falso;
      }
    }
  }
}

Componente.registerComponent('MenuItem', MenuItem);
exportar elemento de menú predeterminado;