import videojs from 'video.js';

const Plugin = videojs.getPlugin('plugin');


let is_jump = false;
class Advanced extends Plugin {

  constructor(player, options) {
    super(player, options);


    this.on(player, ['playing', 'pause'], this.updateState);
    this.on('statechanged', this.logState);
    player.ready(()=>{
      player.controlBar.progressControl.on('keyup', (event) => {
        const keyCode = event.which || event.keyCode;

        // 检查是否按下左箭头键
        if (keyCode === 37) {
          // 处理左箭头键事件
          console.log('左箭头键被按下');
          // 在这里执行你的逻辑
        }

        // 检查是否按下右箭头键
        if (keyCode === 39) {
          // 处理右箭头键事件
          console.log('右箭头键被按下');
          // 在这里执行你的逻辑
        }
      })

      player.controlBar.progressControl.on('mousemove', (event) => {
        is_jump = false;
      })

      player.controlBar.progressControl.on('mouseup', (event) => {
        is_jump = true;
      })
    })

    this.player.on('loadedmetadata', () => {
      // 获取视频的持续时间
      let markers = []
      if (options && 'video_config_options' in options) {
        markers = Object.values(options['video_config_options'].result).map((v) => {
          return {
            time: Math.floor(v.time/options['video_config_options'].info.fps),
            duration: Math.ceil(v.duration/options['video_config_options'].info.fps),
          }
        })
      }
      const duration = this.player.duration();
      markers.forEach((v)=>{
        let redBlock = document.createElement("div");
        let tooltip = document.createElement('div');
        let markerBlock = document.createElement('div');
        let tooltip_text = document.createElement('div');

        markerBlock.style.height= '200px'
        markerBlock.appendChild(tooltip);
        markerBlock.appendChild(redBlock);
        // 将文本提示添加到红色块
        redBlock.style.position = "absolute";
        redBlock.style.width = "10px";
        redBlock.style.height = "20px";
        redBlock.style.backgroundColor = "rgba(219,55, 4, 0.6)";

        // 计算红色块的位置
        const left = (v.time / this.player.duration()) * 100;
        const width = ((v.time + v.duration)/ this.player.duration()) * 100 - left;
        const zIndex = 100 - Math.floor(width) || 100;
        let progress = this.player.controlBar.progressControl.el();
        let progressBar = progress.querySelector(".vjs-progress-holder");
        let progressBarWidth = progressBar.offsetWidth;
        let leftPosition = (50 / this.player.duration()) * progressBarWidth - 5;

        // 设置红色块的位置
        redBlock.style.left = left+"%";
        redBlock.style.width =  width +'%';
        redBlock.style.zIndex = 1;
        redBlock.style.top = "-8px";
        redBlock.style.borderRadius = '2px'
        redBlock.addEventListener('click', () => {
          // 弹出警报
          // if (is_jump) {
          //   this.player.currentTime(v.time);
          // }

        });
        tooltip.className = 'tooltip';
        tooltip.style.height = '20px'
        tooltip.style.display = 'flex'
        tooltip.style.justifyContent = 'center'
        tooltip.style.alignItems = 'center'

        tooltip_text.className='bubble'
        tooltip_text.style.height = '30px'
        tooltip_text.style.width = '80px'
        tooltip_text.style.padding = '6px'
        tooltip_text.style.height = '30px'
        tooltip_text.textContent = options?.error_type
        tooltip.appendChild(tooltip_text)

        tooltip.style.position = "absolute";
        tooltip.style.top = "-76px";
        tooltip.style.left = left+"%";
        tooltip.style.display = 'none';
        redBlock.addEventListener('mouseenter', function () {
          tooltip.style.display = 'block';
          redBlock.style.transform = 'scale(1.1)';
        });

        // 鼠标移出红色块时隐藏文本提示
        redBlock.addEventListener('mouseleave', function () {
          tooltip.style.display = 'none';
          redBlock.style.transform = 'scale(1)';
        });
        // 将红色块添加到进度条中
        progressBar.appendChild(markerBlock);
      })

      // 在这里可以执行其他与视频持续时间相关的操作
    });
  }



  updateOverlay() {
    // console.log(22222222)
    // const overlayPosition = 5; // 在5秒处显示红色块
    //
    // if (currentTime >= overlayPosition && currentTime <= overlayPosition + 5) {
    //   // 创建一个覆盖层
    //   const overlay = document.createElement('div');
    //   overlay.className = 'overlay';
    //   overlay.style.position = 'absolute';
    //   overlay.style.left = '50%';
    //   overlay.style.transform = 'translateX(-50%)';
    //   overlay.style.top = '50%';
    //   overlay.style.transform = 'translateY(-50%)';
    //   overlay.style.width = '10px';
    //   overlay.style.height = '10px';
    //   overlay.style.backgroundColor = 'red';
    //
    //   // 将覆盖层添加到视频容器中
    //   this.player().el().appendChild(overlay);
    // } else {
    //   // 如果不在5秒处，移除覆盖层
    //   const overlay = this.player().el().querySelector('.overlay');
    //   if (overlay) {
    //     overlay.remove();
    //   }
    // }
  }

  dispose() {
    super.dispose();
    videojs.log('the advanced plugin is being disposed');
  }

  updateState() {
    this.setState({playing: !this.player.paused()});
  }

  logState(changed) {
    videojs.log(`the player is now ${this.state.playing ? 'playing' : 'paused'}`);
  }
}

videojs.registerPlugin('advanced', Advanced);
