/**
 * @file popup-button.js
 */
import ClickableComponent from '../clickable-component.js';
import Component from '../component.js';

/**
 * A button class for use with {@link Popup} controls
 *
 * @extends ClickableComponent
 */
class PopupButton extends ClickableComponent {

  /**
   * Create an instance of this class.
   *
   * @param {Player} player
   *        The `Player` that this class should be attached to.
   *
   * @param {Object} [options]
   *        The key/value store of player options.
   */
  constructor(player, options = {}) {
    super(player, options);

    this.update();
  }

  /**
   * Update the `Popup` that this button is attached to.
   */
  update() {
    const popup = this.createPopup();

    if (this.popup) {
      this.removeChild(this.popup);
    }

    this.popup = popup;
    this.addChild(popup);

    if (this.items && this.items.length === 0) {
      this.hide();
    } else if (this.items && this.items.length > 1) {
      this.show();
    }
  }

  /**
   * Create a `Popup`. - Override with specific functionality for component
   *
   * @abstract
   */
  createPopup() {}

  /**
   * Create the `PopupButton`s DOM element.
   *
   * @return {Element}
   *         The element that gets created.
   */
  createEl() {
    return super.createEl('div', {
      className: this.buildCSSClass()
    });
  }

  /**
   * Builds the default DOM `className`.
   *
   * @return {string}
   *         The DOM `className` for this object.
   */
  buildCSSClass() {
    let menuButtonClass = 'vjs-menu-button';

    // If the inline option is passed, we want to use different styles altogether.
    if (this.options_.inline === true) {
      menuButtonClass += '-inline';
    } else {
      menuButtonClass += '-popup';
    }

    return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
  }
}

Component.registerComponent('PopupButton', PopupButton);
export default PopupButton;