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

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';

/**
 * Enables toggling playback by clicking the player.
 */
@Component({
  tag: 'vm-click-to-play',
  styleUrl: 'click-to-play.css',
  shadow: true,
})
export class ClickToPlay {
  private dispatch!: Dispatcher;

  /**
   * By default this is disabled on mobile to not interfere with playback, set this to `true` to
   * enable it.
   */
  @Prop() useOnMobile = false;

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

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

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

  constructor() {
    withComponentRegistry(this);
    withPlayerContext(this, ['paused', 'isVideoView', 'isMobile']);
  }

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

  /** @internal */
  @Method()
  async forceClick() {
    this.onClick();
  }

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

  render() {
    return (
      <div
        class={{
          clickToPlay: true,
          enabled: this.isVideoView && (!this.isMobile || this.useOnMobile),
        }}
        onClick={this.onClick.bind(this)}
      />
    );
  }
}