/**
 * @file clickable-component.js
 * /
importar componente desde './componente';
importar * como Dom desde './utils/dom.js';
importar registro desde './utils/log.js';
importar {asignar} desde './utils/obj';
importar código clave desde 'código clave';

/**
 * Componente en el que se puede hacer clic o accionar con el teclado, pero no es un
 * Botón HTML nativo.
 *
 * Componente @extiende
 * /
clase ClickableComponent extiende Componente {

  /**
   * 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 de componentes.
   *
   * @param {función} [opciones.clickHandler]
   * La función para llamar cuando se hace clic / se activa el botón
   *
   * @param {cadena} [opciones.controlText]
   * El texto a configurar en el botón
   *
   * @param {cadena} [opciones.className]
   * Una lista de clases separadas por espacios o clases para agregar el componente
   *
   * /
  constructor(jugador, opciones) {

    super(jugador, opciones);

    if (this.options_.controlText) {
      this.controlText(this.options_.controlText);
    }

    this.handleMouseOver_ = (e) => this.handleMouseOver(e);
    this.handleMouseOut_ = (e) => this.handleMouseOut(e);
    this.handleClick_ = (e) => this.handleClick(e);
    this.handleKeyDown_ = (e) => this.handleKeyDown(e);

    esto.emitTapEvents();

    esto.habilitar();
  }

  /**
   * Crear el elemento DOM `ClickableComponent`s.
   *
   * @param {cadena} [etiqueta=div]
   * El tipo de nodo del elemento.
   *
   * @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(etiqueta = 'div', accesorios = {}, atributos = {}) {
    accesorios = asignar ({
      nombre de clase: this.buildCSSClass(),
      índice de tabulación: 0
    }, props);

    if (etiqueta === 'botón') {
      log.error(`No se admite la creación de un ClickableComponent con un elemento HTML de ${tag}; use un botón en su lugar.`);
    }

    // Agregue atributos ARIA para el elemento en el que se puede hacer clic que no es un botón HTML nativo
    atributos = asignar ({
      rol: 'botón'
    }, attributes);

    this.tabIndex_ = props.tabIndex;

    const el = Dom.createEl(etiqueta, accesorios, atributos);

    el.appendChild(Dom.createEl('span', {
      className: 'vjs-icono-marcador de posición'
    }, {
      'aria-oculto': verdadero
    }));

    this.createControlTextEl(el);

    volver el;
  }

  disponer () {
    // eliminar controlTextEl_ al desechar
    este.controlTextEl_ = nulo;

    super.dispose();
  }

  /**
   * Crear un elemento de texto de control en este `ClickableComponent`
   *
   * @param {Elemento} [el]
   * Elemento principal para el texto de control.
   *
   * @return {Elemento}
   * El elemento de texto de control que se crea.
   * /
  createControlTextEl(el) {
    this.controlTextEl_ = Dom.createEl('span', {
      className: 'vjs-control-texto'
    }, {
      // informa al usuario del lector de pantalla que el texto del elemento puede cambiar
      'aria-live': 'educado'
    });

    Me caí) {
      el.appendChild(this.controlTextEl_);
    }

    this.controlText(this.controlText_, el);

    devuelve esto.controlTextEl_;
  }

  /**
   * Obtener o configurar el texto localizado para usar en los controles del `ClickableComponent`.
   *
   * @param {cadena} [texto]
   * Texto de control para el elemento.
   *
   * @param {Elemento} [el=esto.el()]
   * Elemento para configurar el título.
   *
   * @return {cadena}
   * - El texto de control al obtener
   * /
  controlarTexto(texto, el = esto.el()) {
    si (texto === indefinido) {
      devuelve esto.controlText_ || 'Necesita Texto';
    }

    const textolocalizado = this.localize(texto);

    this.controlText_ = texto;
    Dom.textContent(this.controlTextEl_, textolocalizado);
    if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
      // Establecer atributo de título si solo se muestra un icono
      el.setAttribute('título', textolocalizado);
    }
  }

  /**
   * Construye el DOM predeterminado `className`.
   *
   * @return {cadena}
   * El DOM `className` para este objeto.
   * /
  construirClaseCSS() {
    devuelve `vjs-control vjs-button ${super.buildCSSClass()}`;
  }

  /**
   * Habilite este `ClickableComponent`
   * /
  permitir() {
    if (!this.enabled_) {
      esto.habilitado_ = verdadero;
      this.removeClass('vjs-disabled');
      this.el_.setAttribute('aria-disabled', 'false');
      if (tipo de this.tabIndex_ !== 'indefinido') {
        this.el_.setAttribute('tabIndex', this.tabIndex_);
      }
      this.on(['toque', 'clic'], this.handleClick_);
      this.on('keydown', this.handleKeyDown_);
    }
  }

  /**
   * Deshabilitar este `ClickableComponent`
   * /
  desactivar() {
    esto.habilitado_ = falso;
    this.addClass('vjs-disabled');
    this.el_.setAttribute('aria-disabled', 'true');
    if (tipo de this.tabIndex_ !== 'indefinido') {
      this.el_.removeAttribute('tabIndex');
    }
    this.off('mouseover', this.handleMouseOver_);
    this.off('mouseout', this.handleMouseOut_);
    this.off(['toque', 'clic'], this.handleClick_);
    this.off('keydown', this.handleKeyDown_);
  }

  /**
   * Maneja el cambio de idioma en ClickableComponent para el jugador en componentes
   *
   *
   * /
  manejarcambioIdioma() {
    este.controlText(este.controlText_);
  }

  /**
   * Controlador de eventos que se llama cuando un `ClickableComponent` recibe un
   * Evento `clic` o `toque`.
   *
   * @param {EventTarget~Evento} evento
   * El evento `tocar` o `hacer clic` que provocó la llamada de esta función.
   *
   * @escucha toca
   * @escucha clic
   * @abstracto
   * /
  handleClick(evento) {
    if (this.options_.clickHandler) {
      this.options_.clickHandler.call(this, argumentos);
    }
  }

  /**
   * Controlador de eventos que se llama cuando un `ClickableComponent` recibe un
   * Evento `keydown`.
   *
   * De forma predeterminada, si la tecla es Espacio o Intro, activará un evento de "clic".
   *
   * @param {EventTarget~Evento} evento
   * El evento `keydown` que hizo que se llamara a esta función.
   *
   * @escucha tecla abajo
   * /
  handleKeyDown(evento) {

    // Admite la operación de la tecla Espacio o Intro para activar un evento de clic. También,
    // evita que el evento se propague a través del DOM y se active
    // Teclas de acceso rápido del jugador.
    if (keycode.isEventKey(evento, 'Espacio') || keycode.isEventKey(evento, 'Entrar')) {
      event.preventDefault();
      event.stopPropagation();
      this.trigger('clic');
    } else {

      // Pasar el manejo de pulsaciones de teclas para teclas no compatibles
      super.handleKeyDown(evento);
    }
  }
}

Component.registerComponent('ClickableComponent', ClickableComponent);
exportar ClickableComponent predeterminado;