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

import { isUndefined } from '../../../utils/unit';
import { findPlayer } from '../../core/player/findPlayer';
import { PlayerProps } from '../../core/player/PlayerProps';
import {
  getComponentFromRegistry,
  withComponentRegistry,
} from '../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../core/player/withPlayerContext';

/**
 * Enables toggling fullscreen mode by double clicking the player.
 */
@Component({
  tag: 'vm-dbl-click-fullscreen',
  styleUrl: 'dbl-click-fullscreen.css',
  shadow: true,
})
export class DblClickFullscreen {
  @State() canSetFullscreen = false;

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

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

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

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

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

  @Watch('playbackReady')
  async onPlaybackReadyChange() {
    const player = await findPlayer(this);
    if (isUndefined(player)) return;
    this.canSetFullscreen = await player.canSetFullscreen();
  }

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

  private async onTriggerClickToPlay() {
    const [clickToPlay] = getComponentFromRegistry(this, 'vm-click-to-play');
    await clickToPlay?.forceClick();
  }

  private async onToggleFullscreen() {
    const player = await findPlayer(this);
    if (isUndefined(player)) return;
    this.isFullscreenActive
      ? player.exitFullscreen()
      : player.enterFullscreen();
  }

  private clicks = 0;

  private onClick() {
    this.clicks += 1;

    if (this.clicks === 1) {
      setTimeout(() => {
        if (this.clicks === 1) {
          this.onTriggerClickToPlay();
        } else {
          this.onToggleFullscreen();
        }

        this.clicks = 0;
      }, 300);
    }
  }

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