import React, { useEffect, useRef } from 'react';
import FlvJs from 'flv.js';

import { message } from 'antd';

import './style.scss';

import videoStreamBoxDefault from './videoStream-box.svg';

function VideoStream(props: IVideoStream) {
  let flvPlayer = null;
  let videoRef = useRef(null);
  // const [cockpitVideoStreamLoading, setCockpitVideoStreamLoading] =
  //   useRecoilState(cockpitVideoStream); //视频流loading

  const {
    videoStreamUrl,
    id,
    isMute,
    videoStreamOpacity,
    originalVideoStream,
    isPreviewShow = false
  } = props;

  useEffect(() => {
    return () => {
      //销毁视频流
      if (flvPlayer) {
        flvPlayer.pause();
        flvPlayer.unload();
        flvPlayer.destroy();
        flvPlayer.detachMediaElement();
        flvPlayer = null;
      }
    };
  }, []);

  useEffect(() => {
    if (
      FlvJs.isSupported() &&
      videoRef?.current !== null &&
      videoStreamUrl !== ''
    ) {
      if (flvPlayer) {
        flvPlayer.destroy();
      }
      //先把之前的存在的视频流销毁
      flvPlayer = FlvJs.createPlayer({
        type: 'flv',
        url: videoStreamUrl,
        isLive: true,
        config: {
          enableWorker: false,
          enableStashBuffer: false,
          autoCleanupSourceBuffer: true,
          fixAudioTimestampGap: false
        }
      });

      flvPlayer.attachMediaElement(videoRef?.current);

      flvPlayer.on('error', (err) => {
        if (err === 'NetworkError') {
          message.error('资源请求出错');
        }
      });
      flvPlayer.load();
      flvPlayer.play();
    }
    return () => {
      if (flvPlayer) {
        flvPlayer.pause();
        flvPlayer.unload();
        flvPlayer.destroy();
        flvPlayer.detachMediaElement();
        flvPlayer = null;
      }
    };
  }, [videoStreamUrl, originalVideoStream]);

  useEffect(() => {
    //预览的时候销毁
    if (flvPlayer && isPreviewShow) {
      flvPlayer.pause();
      flvPlayer.unload();
      flvPlayer.destroy();
      flvPlayer.detachMediaElement();
      flvPlayer = null;
    }
  }, [isPreviewShow]);

  const renderVideoStream = () => {
    return (
      <video
        key={id}
        crossOrigin="anonymous"
        style={{
          width: '100%',
          height: '100%',
          display: videoStreamUrl === '' ? 'none' : 'block',
          objectFit: 'fill'
        }}
        muted={isMute}
        autoPlay
        ref={videoRef}
      />
    );
  };

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        opacity: videoStreamOpacity / 100,
        position: 'relative'
      }}
    >
      {/* {cockpitVideoStreamLoading ? (
        <div className="video-stream-spin-wrap">
          <Spin />
        </div>
      ) : (
        <></>
      )} */}
      {videoStreamUrl === '' ? (
        <img
          style={{ width: '100%', height: '100%' }}
          src={videoStreamBoxDefault}
          alt="默认图"
        />
      ) : (
        renderVideoStream()
      )}
    </div>
  );
}

export default VideoStream;

export interface IVideoStream {
  videoStreamUrl: string;
  id: string;
  isMute: boolean;
  videoStreamOpacity: number;
  originalVideoStream?: string;
  isPreviewShow?: boolean;
}