import { Component, h, Host, Prop, State, Watch } from '@stencil/core';

import { isUndefined } from '../../../../utils/unit';
import { PlayerProps } from '../../../core/player/PlayerProps';
import {
  getPlayerFromRegistry,
  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 the visibility of captions. This control is not displayed if there's no
 * track currently set.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/controls/caption-control/caption-control.png"
 *   alt="Vime caption control component"
 * />
 */
@Component({
  tag: 'vm-caption-control',
  styleUrl: 'caption-control.css',
  shadow: true,
})
export class CaptionControl implements KeyboardControl {
  @State() canToggleCaptionVisibility = false;

  /**
   * The URL to an SVG element or fragment to load.
   */
  @Prop() showIcon = 'captions-on';

  /**
   * The URL to an SVG element or fragment to load.
   */
  @Prop() hideIcon = 'captions-off';

  /**
   * 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;

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

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

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

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

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

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

  @Watch('textTracks')
  @Watch('playbackReady')
  async onTextTracksChange() {
    const player = getPlayerFromRegistry(this);
    this.canToggleCaptionVisibility =
      this.textTracks.length > 0 &&
      ((await player?.canSetTextTrackVisibility()) ?? false);
  }

  constructor() {
    withComponentRegistry(this);
    withPlayerContext(this, [
      'i18n',
      'textTracks',
      'isTextTrackVisible',
      'playbackReady',
    ]);
  }

  componentDidLoad() {
    this.onTextTracksChange();
  }

  private onClick() {
    const player = getPlayerFromRegistry(this);
    player?.setTextTrackVisibility?.(!this.isTextTrackVisible);
  }

  render() {
    const tooltip = this.isTextTrackVisible
      ? this.i18n.disableCaptions
      : this.i18n.enableCaptions;
    const tooltipWithHint = !isUndefined(this.keys)
      ? `${tooltip} (${this.keys})`
      : tooltip;

    return (
      <Host hidden={!this.canToggleCaptionVisibility}>
        <vm-control
          label={this.i18n.captions}
          keys={this.keys}
          hidden={!this.canToggleCaptionVisibility}
          pressed={this.isTextTrackVisible}
          onClick={this.onClick.bind(this)}
        >
          <vm-icon
            name={this.isTextTrackVisible ? this.showIcon : this.hideIcon}
            library={this.icons}
          />

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