import React from 'react';
import { Empty, Tooltip } from 'antd';
import { FullscreenOutlined } from '@ant-design/icons';
import flvjs from 'flv.js';
import style from '../index.less';
import { ChartBoxTitle } from './ChartBox';
import { getMonitorList } from '@/Project/services/DataMeter';
import { useRequest } from '@umijs/max';

function Monitor(props: DataMeter.IModelsProps) {
  const {
    child,
    projectId,
    edit,
    removeModel,
    layout,
    // match: {
    //   params: { projectId },
    // },
  } = props;
  // TODO: 接口请求
  const { data: monitorList } = useRequest(() => getMonitorList(projectId));

  var content;
  var videoList;
  if (!child || child.length == 0) {
    videoList = monitorList.map((item: any) => ({
      title: item.name,
      key: item.id,
      value: item.HttpFlvPath,
      show: true,
    }));
  } else {
    videoList = child;
  }

  if (videoList.length > 0) {
    content = (
      <ul className={style.videoList}>
        {videoList.map((item: any) => {
          return (
            <li key={item.key}>
              <div className={style.bg}>
                {item.value && <VideoBox url={item.value} />}
              </div>
            </li>
          );
        })}
      </ul>
    );
  } else {
    content = <Empty />;
  }

  return (
    <div className={style.layout} key={layout.i}>
      <div className={style.modelBox}>
        <ChartBoxTitle title={'视频监控'}></ChartBoxTitle>
        <div className={style.modelContent}>{content}</div>
      </div>
      {/* {renderBtnToUnity(layout)} */}
      <div
        className={style.controlBox}
        onMouseDown={(e) => {
          e.stopPropagation();
        }}
      >
        {edit && (
          <Tooltip title="删除该模块">
            <div
              className={style.close}
              onClick={() => {
                removeModel(layout.key, layout.active);
              }}
            ></div>
          </Tooltip>
        )}
      </div>
    </div>
  );
}

class VideoBox extends React.Component<any> {
  // state = { videoEle: null };
  videoEle!: HTMLVideoElement;
  player!: flvjs.Player;
  componentDidMount() {
    const { url } = this.props;
    const videoEle = this.videoEle;

    if (flvjs.isSupported()) {
      if (!videoEle) return;
      let player = this.player;
      player = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        url,
      });
      player.attachMediaElement(videoEle);

      try {
        player.load();
        player.play();
      } catch (error) {
        // console.log(error);
      }
    }
    document.addEventListener('fullscreenchange', this.handleOutFullscreen);
  }
  componentWillUnmount() {
    let player = this.player;
    if (!player) return;
    player.pause();
    player.unload();
    player.detachMediaElement();
    player.destroy();
    document.removeEventListener('fullscreenchange', this.handleOutFullscreen);
  }
  handleOutFullscreen(e: any) {
    // UnityAction.emit('fullscreen', e.currentTarget.webkitIsFullScreen);
  }
  checkFull() {}

  launchFullscreen() {
    var element = this.videoEle;
    //此方法不可以在異步任務中執行，否則火狐無法全屏
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var videobox = document.getElementById('videobox')!;
      var cssText = 'width:100%;height:100%;overflow:hidden;';
      docHtml.style.cssText = cssText;
      docBody.style.cssText = cssText;
      videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;';
      // document.fullscreen = true;
    }
  }
  render() {
    return (
      <>
        <FullscreenOutlined
          onClick={() => {
            this.launchFullscreen();
          }}
          className={style.fullscreen}
          type="fullscreen"
        />
        <video
          ref={(ele) => {
            this.videoEle != ele;
          }}
          muted={true}
          autoPlay={true}
        ></video>
      </>
    );
  }
}

export default Monitor;
