//*
// 媒体控制栏
// */

import Loger from "../Loger";
import Ape from "./Ape";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
import TimerCounterTool from "libs/TimerCounterTool";

let loger = Loger.getLoger('PC-MediaControlBarApe');
const SOUND_BTN_WIDTH=66;
const TIME_TEXT_WIDTH=90;
class MediaControlBarApe extends Ape {
  constructor() {
    super();
    this.playStatus = "";
    this.isShowVolumeBar = false;//
    this.isProgressMouseDown = false;//进度条是否按下
    this.isProVolMouseDown = false;//音量控制条是否已经按钮
    this.isOpenUpdateStatusInfo = false;//是否开同步信息
    this.video = null;//需要控制的播放器
    this.controlCallback = null;
    this.totalTime = 0;
    this.duration=0;//媒体文件的总时间长
    this.mediaVolume = 60;//当前音量
    this.seekPercent = 0;//当前进度
    this.seekTime = 0;//

    this.updateCounter = 0;//定时更新数据的计数器
    this.updateStatusDelay = 5;//每5秒更新一次数据
    this.timerCounter = new TimerCounterTool();//计时器
    this.timerCounter.addTimerCallBack(this.timerCounterUptate.bind(this), 1);//计时器监听 每秒更新一次

    this.init();
    this.addEvent();
    this.onWindowResize();//默认刷新一次界面布局
  }

  init() {
    this.stop();
    this.updatePlayProgressBar();
    this.updaterVolumeProgressBar()
  }

  addEvent() {
    //监听舞台
    $(window).on('resize', this.onWindowResize.bind(this));

    $("#mediaShareVolumePlay").on("click", this._openVolumeControl.bind(this));//打开音量控制
    //音量控制
    $('#mediaShareVoice_btn').on('mousedown', this._changeVolume.bind(this));//音量进度条
    //暂停播放伴音按钮
    $("#mediaShareProgressPause").on("click", this._clickPause.bind(this));
    //继续播放伴音按钮
    $("#mediaShareProgressPlay").on("click", this._clickPlay.bind(this));

    //进度条控制
    $('#mediaShareProgress_btn').on('mousedown', this._changeProgressBar.bind(this));

    //给整个进度条可以点击seek
    $('#mediaShareProgress_bg').on('mousedown', this._clickProgressBarBg.bind(this));
    $('#mediaShareProgress_color').on('mousedown', this._clickProgressBarBg.bind(this));
  }

  //计时器-------------------
  //开启计时器
  startTimerCounter() {
    loger.log("开启计时器")
    this.updateCounter = 0;
    this.stopTimerCounter();
    if (this.timerCounter) {
      this.timerCounter.startTimer();
    }
  }

  //停止计时器
  stopTimerCounter() {
    loger.log("停止计时器")
    this.updateCounter = 0;
    if (this.timerCounter) {
      this.timerCounter.stopTimer();
    }
  }

  timerCounterUptate() {
    if (this.video && !this.isProgressMouseDown) {
      this.totalTime = this.video.duration || this.duration;
      this.seekTime = this.video.currentTime || 0;
      this.seekPercent = parseInt(this.seekTime / this.totalTime * 100);
      //console.log("totalTime", this.totalTime)
      //console.log("seekTime", this.seekTime)
      //console.log("seekPercent", this.seekPercent)
      this.updatePlayProgressBar();
    }
    if (this.seekTime >= this.totalTime&&this.seekTime!=1) {
      if (this.totalTime > 0) {
        this.sendCallBack(MediaControlBarApe.STOP)
      }
      this.stopTimerCounter();
      this.stop();
    }

    //定时更新同步数据
    this.updateCounter++;
    if (this.updateCounter >= this.updateStatusDelay) {
      this.updateCounter = 0;
      loger.warn("定时同步更新媒体共享的状态")
      this.sendCallBack(this.playStatus);
    }
  }

  //外部接口调用------------------------------
  play(_seek) {
    loger.log("play");
    this.playStatus = MediaControlBarApe.PLAY;
    this.showPauseUI();
    this.showBox();
    this.startTimerCounter();
  }

  pause() {
    loger.log("pause");
    this.playStatus = MediaControlBarApe.PAUSE;
    this.showPlayUI();
    this.showBox();
    this.stopTimerCounter();
  }

  stop() {
    loger.log("stop");
    this.seekPercent = 0;
    this.seekTime = 0;
    this.totalTime = 0;
    this.playStatus = MediaControlBarApe.STOP;
    this._hideMediaSharePlayProgressVoiceBox();
    this.updatePlayProgressBar();
    this.showPlayUI();
    this.hideBox();
    this.stopTimerCounter();
  }

  seek(_seek) {
    loger.log("seek");
    this.showBox();
    this.seekTime = _seek || 0;
    this.seekPercent = parseInt(this.seekTime / this.totalTime * 100);
    this.updateVideoProgress();
    this._hideMediaSharePlayProgressVoiceBox();
  }

  changeVolume(_volume) {
    loger.log("changeVolume");
    this.showBox();
    this.mediaVolume = _volume || 0;
    this.updaterVolumeProgressBar();
  }


  //-UI
  showPlayUI() {
    $("#mediaShareProgressPause").hide();
    $("#mediaShareProgressPlay").show();
  }

  showPauseUI() {
    $("#mediaShareProgressPause").show();
    $("#mediaShareProgressPlay").hide();
  }

  showBox() {
    $("#h5MediaShareControls").show();
  }

  hideBox() {
    $("#h5MediaShareControls").hide();
  }

  //------------------------------------
  //播放按钮
  _clickPlay() {
    loger.log("播放按钮点击===>");
    this.updateCounter = 0;
    this.playStatus = MediaControlBarApe.PLAY;
    this._hideMediaSharePlayProgressVoiceBox();
    this.showPauseUI();
    this.startTimerCounter();
    this.sendCallBack(MediaControlBarApe.PLAY);
  }

  //暂停播放
  _clickPause() {
    loger.log("暂停播放按钮点击===>");
    this.updateCounter = 0;
    this.playStatus = MediaControlBarApe.PAUSE;
    this._hideMediaSharePlayProgressVoiceBox();
    this.showPlayUI();
    this.stopTimerCounter();
    this.sendCallBack(MediaControlBarApe.PAUSE);
  }

//打开音量控制条
  _openVolumeControl() {
    if (this.isShowVolumeBar == true) {
      this._hideMediaSharePlayProgressVoiceBox();
    } else {
      this._showMediaSharePlayProgressVoiceBox();
    }
  }

  //音量进度条-----------------------------------------
  //音量控制鼠标按下
  _changeVolume(evt) {
    this.updateCounter = 0;
    this.isProVolMouseDown = true;
    document.onmousemove = this._mouseMoveMediaVoiceHandler.bind(this);
    document.onmouseup = this._mouseUpMediaVoiceHandler.bind(this);
    return false;
  }

  //音量条移动
  _mouseMoveMediaVoiceHandler(evt) {
    let per = this._moveVolMethod(evt);
    this.mediaVolume = per;
    this.updaterVolumeProgressBar();
  }

  _mouseUpMediaVoiceHandler(evt) {
    if (this.isProVolMouseDown) {
      if (this.playStatus == MediaControlBarApe.PLAY) {
        this.sendCallBack(MediaControlBarApe.PLAY)
      } else if (this.playStatus == MediaControlBarApe.PAUSE) {
        this.sendCallBack(MediaControlBarApe.PAUSE)
      } else {
        this.sendCallBack(MediaControlBarApe.STOP)
      }
    }
    this.isProVolMouseDown = false;
    document.onmousemove = null;
    document.onmouseup = null
  }


  //音量移动函数
  _moveVolMethod(evt) {
    let windowY = (evt || window.event).clientY;
    let _width = $('#mediaShareVoice_bg')
    let top = _width.offset().top;
    let _percentage = _width.innerHeight();
    let prevX = parseInt(windowY - top);
    if (prevX < 0)prevX = 0;
    if (prevX > _percentage)prevX = _percentage;
    let per = Math.floor(100 * prevX / _percentage);
    per = 100 - per;
    return per;
  }

  updaterVolumeProgressBar() {
    let _color = $('#mediaShareVoice_color');
    let _btn = $('#mediaShareVoice_btn');
    let perChange = this.mediaVolume / 100;
    if (this.video) {
      this.video.volume = perChange;//设置音量
    }
    //let curSeek = document.getElementById("h5MediaShare").currentTime;
    _btn.css('top', 100 - this.mediaVolume + '%');
    _color.css('height', (this.mediaVolume) + '%');
  }

  _showMediaSharePlayProgressVoiceBox() {
    this.isShowVolumeBar = true;
    $(".mediaSharePlayProgressVoiceBox").show();
  }

  _hideMediaSharePlayProgressVoiceBox() {
    this.isShowVolumeBar = false;
    $(".mediaSharePlayProgressVoiceBox").hide();
  }

  //播放进度条控制-------------------------------------
  _changeProgressBar(evt) {
    this._hideMediaSharePlayProgressVoiceBox();
    this.isProgressMouseDown = true;
    document.onmousemove = this._mouseMoveMediaProgressHandler.bind(this);
    document.onmouseup = this._mouseUpMediaaHandler.bind(this);
    return false;
  }
  _clickProgressBarBg(evt) {
    this.isProgressMouseDown=true;
    let per = this._moveMethod(evt);
    this.seekPercent = per;
    this.updatePlayProgressBar();
    this. _mouseUpMediaaHandler(evt);
  }

  //鼠标在进度条上移动
  _mouseMoveMediaProgressHandler(evt) {
    let per = this._moveMethod(evt);
    this.seekPercent = per;
    this.updatePlayProgressBar();
    //console.log("进度条移动百分比", this.seekPercent);
  }

  updatePlayProgressBar() {
    let _color = $('#mediaShareProgress_color');
    let _btn = $('#mediaShareProgress_btn');
    _btn.css('left', this.seekPercent + '%');
    _color.css('width', this.seekPercent + '%');

    let curTimeStr=this.timerCounterLayOut(this.seekTime);
    let totalTimeStr=this.timerCounterLayOut(this.totalTime);
    $("#mediaShareTimestamp").html(curTimeStr+"/"+totalTimeStr);
  }

  updateVideoProgress() {
    if (this.video) {
      try{
        this.video.currentTime = this.seekTime;//设置音量
      }catch (err){
        loger.warn("无法设置video的currentTime");
      }

    }
  }

  //鼠标进度条抬起
  _mouseUpMediaaHandler(evt) {
    if (this.isProgressMouseDown) {
      this.seekTime = parseInt(this.seekPercent * this.totalTime * 0.01);

      if (this.playStatus == MediaControlBarApe.PLAY) {
        this.sendCallBack(MediaControlBarApe.PLAY)
      } else if (this.playStatus == MediaControlBarApe.PAUSE) {
        this.sendCallBack(MediaControlBarApe.PAUSE)
      } else {
        this.sendCallBack(MediaControlBarApe.STOP)
      }
      this.updateVideoProgress();
    }
    this.isProgressMouseDown = false;
    document.onmousemove = null;
    document.onmouseup = null
  }

  //进度条移动函数
  _moveMethod(evt) {
    let windowX = (evt || window.event).clientX;
    let _width = $('#mediaShareProgress_bg')
    let left = _width.offset().left;
    let _percentage = _width.innerWidth();
    let prevX = parseInt(windowX - left);
    if (prevX < 0)prevX = 0;
    if (prevX > _percentage)prevX = _percentage;
    let per = Math.floor(100 * prevX / _percentage);
    return per;
  }

  timerCounterLayOut(timestamp) {
    let minute = 0,
      second = 0;
    minute = Math.floor(timestamp / 60);
    second = Math.floor(timestamp - minute * 60)
    let timeValue = ((minute < 10) ? "0" : "") + minute;
    timeValue += ((second < 10) ? ":0" : ":") + second;
    return timeValue;
  }

  //舞台大小发生改变
  onWindowResize() {
    //loger.log("舞台大小发生改变");
    let boxWidth = $(".h5MediaShareControls").width();
    //进度条的宽度是盒子的总宽度减去 声音按钮和时间显示区域的宽度
    $(".mediaSharePlayProgressBox").width((boxWidth - SOUND_BTN_WIDTH-TIME_TEXT_WIDTH) + "px")
  }

  //调用回调函数通知外部
  sendCallBack(_action, _data) {
    if (!this.isOpenUpdateStatusInfo) {
      return
    }
    if (this.controlCallback) {
      this.controlCallback({
        action: _action,
        data: {
          seek: this.seekTime,
          mediaVolume: this.mediaVolume
        }
      })
    }
  }
}
MediaControlBarApe.prototype.STOP = MediaControlBarApe.STOP = "stop";//0
MediaControlBarApe.prototype.PLAY = MediaControlBarApe.PLAY = "play";//1
MediaControlBarApe.prototype.PAUSE = MediaControlBarApe.PAUSE = "pause";//2
MediaControlBarApe.prototype.SEEK = MediaControlBarApe.SEEK = "seek";//3
MediaControlBarApe.prototype.CHANGE_VOLUME = MediaControlBarApe.CHANGE_VOLUME = "change_volume";//4

export default MediaControlBarApe;