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

import { PlayerProps } from '../../core/player/PlayerProps';
import { withComponentRegistry } from '../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../core/player/withPlayerContext';
import { Provider } from '../../providers/Provider';

/**
 * Displays a loading indicator when the video is `buffering`.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/spinner/spinner.png"
 *   alt="Vime spinner component"
 * />
 */
@Component({
  tag: 'vm-spinner',
  styleUrl: 'spinner.css',
  shadow: true,
})
export class Spinner {
  private blacklist = [Provider.YouTube];

  @State() isHidden = true;

  @State() isActive = false;

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

  @Watch('isVideoView')
  onVideoViewChange() {
    this.isHidden = !this.isVideoView;
    this.onVisiblityChange();
  }

  /** @internal */
  @Prop() currentProvider?: PlayerProps['currentProvider'];

  /**
   * Whether the spinner should be active when the player is booting or media is loading.
   */
  @Prop() showWhenMediaLoading = false;

  /**
   * Emitted when the spinner will be shown.
   */
  @Event({ bubbles: false }) vmWillShow!: EventEmitter<void>;

  /**
   * Emitted when the spinner will be hidden.
   */
  @Event({ bubbles: false }) vmWillHide!: EventEmitter<void>;

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

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

  @Watch('buffering')
  @Watch('playbackReady')
  onActiveChange() {
    this.isActive =
      this.buffering || (this.showWhenMediaLoading && !this.playbackReady);
    this.onVisiblityChange();
  }

  constructor() {
    withComponentRegistry(this);
    withPlayerContext(this, [
      'isVideoView',
      'buffering',
      'playbackReady',
      'currentProvider',
    ]);
  }

  private onVisiblityChange() {
    !this.isHidden && this.isActive
      ? this.vmWillShow.emit()
      : this.vmWillHide.emit();
  }

  render() {
    return (
      <div
        class={{
          spinner: true,
          hidden:
            this.isHidden || this.blacklist.includes(this.currentProvider!),
          active: this.isActive,
        }}
      >
        <div
          class={{
            spin: true,
            active: this.isActive,
          }}
        >
          Loading...
        </div>
      </div>
    );
  }
}