import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';

import { isUndefined } from '../../../../utils/unit';
import {
  createDispatcher,
  Dispatcher,
} from '../../../core/player/PlayerDispatcher';
import { PlayerProps } from '../../../core/player/PlayerProps';
import { withComponentRegistry } from '../../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../../core/player/withPlayerContext';
import { TooltipDirection, TooltipPosition } from '../../tooltip/types';
import { KeyboardControl } from '../control/KeyboardControl';

/**
 * A control for toggling whether there is audio output or not. In other words the muted state of
 * the player.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/controls/mute-control/mute-control.png"
 *   alt="Vime mute control component"
 * />
 */
@Component({
  tag: 'vm-mute-control',
  shadow: true,
})
export class MuteControl implements KeyboardControl {
  private dispatch!: Dispatcher;

  /**
   * The name of the low volume icon to resolve from the icon library.
   */
  @Prop() lowVolumeIcon = 'volume-low';

  /**
   * The name of the high volume icon to resolve from the icon library.
   */
  @Prop() highVolumeIcon = 'volume-high';

  /**
   * The name of the muted volume icon to resolve from the icon library.
   */
  @Prop() mutedIcon = 'volume-mute';

  /**
   * The name of an icon library to use. Defaults to the library defined by the `icons` player
   * property.
   */
  @Prop() icons?: string;

  /**
   * Whether the tooltip is positioned above/below the control.
   */
  @Prop() tooltipPosition: TooltipPosition = 'top';

  /**
   * The direction in which the tooltip should grow.
   */
  @Prop() tooltipDirection: TooltipDirection;

  /**
   * Whether the tooltip should not be displayed.
   */
  @Prop() hideTooltip = false;

  /** @inheritdoc */
  @Prop() keys?: string = 'm';

  /** @internal */
  @Prop() volume: PlayerProps['volume'] = 50;

  /** @internal */
  @Prop() muted: PlayerProps['muted'] = false;

  /** @internal */
  @Prop() i18n: PlayerProps['i18n'] = {};

  /**
   * Emitted when the control receives focus.
   */
  @Event() vmFocus!: EventEmitter<void>;

  /**
   * Emitted when the control loses focus.
   */
  @Event() vmBlur!: EventEmitter<void>;

  constructor() {
    withComponentRegistry(this);
    withPlayerContext(this, ['muted', 'volume', 'i18n']);
  }

  connectedCallback() {
    this.dispatch = createDispatcher(this);
  }

  private getIcon() {
    const volumeIcon =
      this.volume < 50 ? this.lowVolumeIcon : this.highVolumeIcon;
    return this.muted || this.volume === 0 ? this.mutedIcon : volumeIcon;
  }

  private onClick() {
    this.dispatch('muted', !this.muted);
  }

  render() {
    const tooltip = this.muted ? this.i18n.unmute : this.i18n.mute;
    const tooltipWithHint = !isUndefined(this.keys)
      ? `${tooltip} (${this.keys})`
      : tooltip;

    return (
      <vm-control
        label={this.i18n.mute}
        pressed={this.muted}
        keys={this.keys}
        onClick={this.onClick.bind(this)}
      >
        <vm-icon name={this.getIcon()} library={this.icons} />

        <vm-tooltip
          hidden={this.hideTooltip}
          position={this.tooltipPosition}
          direction={this.tooltipDirection}
        >
          {tooltipWithHint}
        </vm-tooltip>
      </vm-control>
    );
  }
}