/**
 * API 文档
 * props                    default               说明
 * src	                    - <string>  	      要播放视频的资源地址
 * loop                     false <boolean>       是否循环播放
 * autoplay                 false <boolean>       是否自动播放
 * muted                    false <boolean>       是否静音
 * controls                 false <boolean>       是否显示默认播放控件（底部工具条，包括播放/暂定按钮、播放进度、时间）
 * poster                   - <string>            视频封面图的url。如果不传的话，默认取视频的首帧图作为封面图
 * scaleType                fitCenter <string>    当视频、封面大小和容器大小不一致时，表现形式
 *                                                  fit-center/fitCenter
 *                                                  center-crop/centerCrop
 *                                                  fit-xy/fitXY
 * full                     false <boolean>       underlay 模式下点击是否全屏
 *
 * 以下属性未验证
 * show-fullscreen-btn="true"
 * show-play-btn="true"
 * show-center-play-btn="true"
 * object-fit="contain"
 * scale-type="fit-xy"
 * direction="90"
 * initial-time="0"
 * mobilenetHintType="2"
 *
 *
 * 事件文档
 * 事件名                    说明
 * play                     当开始/继续播放时触发play事件
 * pause                    当暂停播放时触发pause事件
 * ended                    当播放到末尾时触发ended事件
 * stop                     视频播放终止，恢复到视频首帧，点击播放按钮可以继续播放
 * error                    当视频播放出错时触发，{"errorCode":"int 错误码"}
 * timeUpdate               当播放进度变化时触发，{"currentTime":''int 当前进度", "videoDuration":"int 视频总时长"}
 *
 * video ref 方法
 * 方法名                    说明
 * play                     开始播放/继续播放
 * pause                    暂停播放
 * stop                     停止播放，回到初始状态
 *
 */

import { Component, ComponentProps, WaftBridge, document, Event,console, VideoElement } from 'waft';
import { JSONObject } from "waft-json";
import { lodash, refs } from "waft-ui-common";

let index: i32 = 0;

export class Video extends Component {
  id: string = '';
  constructor(props: ComponentProps) {
    super(props);
    this.id = `video_${(index++).toString()}`;
    const state = new JSONObject();
    state.set('id', this.id);
    this.setState(state);
  }

  willMount(props: JSONObject): void {
    super.willMount(props);
    console.log("===willMount:" + props.toString());
    if (props.has('ref')) {
      const ref: string = lodash.get(props, 'ref', '');
      refs.set(ref, this);
    }
  }

  onPlay(e: Event): void{
    this.props.dispatch('onPlay', e.target.dataset);
  }

  onPause(e: Event): void{
    this.props.dispatch('onPause', e.target.dataset);
  }

  onEnded(e: Event): void{
    this.props.dispatch('onEnded', e.target.dataset);
  }

  onStop(e: Event): void{
    this.props.dispatch('onStop', e.target.dataset);
  }

  onError(e: Event): void{
    this.props.dispatch('onError', e.target.dataset);
  }

  onTimeUpdate(e: Event): void{
    this.props.dispatch('onTimeUpdate', e.target.dataset);
  }

  // underlay 模式下点击全屏
  handleVideo(e: Event): void{
    let full = lodash.toBoolean(this.props.get('full'));
    if (full) {
      console.log('====### 即将设置全屏');
      const state = new JSONObject();
      state.set('showFull', true);
      this.setState(state);
    }
  }

  closeVideo(e: Event): void{
    const state = new JSONObject();
    state.set('showFull', false);
    this.setState(state);
    this.play(); // 继续播放视频
  }

  /**
   * 播放
   */
  public play(): void {
    const videoElement = document.querySelector('#' + this.id) as VideoElement;
    videoElement.play();
  }

  /**
   * 暂停播放
   */
  public pause(): void {
    const videoElement = document.querySelector('#' + this.id) as VideoElement;
    videoElement.pause();
  }

  /**
   * 停止播放
   */
  public stop(): void {
    const videoElement = document.querySelector('#' + this.id) as VideoElement;
    videoElement.stop();
  }
}