/** @format */

import React, { useRef, useEffect, useState } from 'react';
import merge from 'lodash/merge';
import { Spin } from 'antd';
import Hls from 'hls.js';
import { VideoBox, VideoComp, Error, ErrorContent } from './styled';
import { globalTheme, ThemeData } from '../../../utils/theme';
import { colorRgb } from '../../../utils/index';
const styleBase = {
  width: 372,
  height: 212,
};
const ministyleBase = {
  // width: 226,
  // height: 128,
  width: 372,
  height: 212,
};
function launchFullScreen(element: any) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

interface SingleVideoProps {
  size?: Record<string, any>;
  data?: any;
  url: string;
  title?: string;
  theme?: ThemeData;
}

const SingleVideo = (props: SingleVideoProps) => {
  const { size, data, theme } = props;
  const [mouseEnter, setMouseEnter] = useState(false);
  const [loading, setLoading] = useState<any>(true);
  const [hlsInc, setHlsInc] = useState<any>(null);
  const [fullScreen, setFullScreen] = useState(false);
  const [activeVideo, setActiveVideo] = useState({ url: '', title: '' });
  const [activeNum, setActiveNum] = useState(0);
  const videoRef = useRef<HTMLVideoElement>(null);
  let manVideo = data && data.length > 1;
  const style = manVideo ? merge(ministyleBase, size) : merge(styleBase, size);
  const { url, title } = activeVideo;
  const themeList = theme ? theme : globalTheme;
  useEffect(() => {
    if (data && data.length) {
      setActiveVideo(data[0]);
    } else {
      setActiveVideo(data[0]);
    }
    return () => {};
  }, []);
  function handleSrcUpdate(src: string) {
    if (!videoRef || !src) return;
    const video: any = videoRef.current;

    const vSrc = src;
    if (video && vSrc && vSrc.includes('.mp4')) {
      video.src = vSrc;

      // video.play();
      return;
    }
    if (Hls.isSupported() && vSrc) {
      if (hlsInc) {
        hlsInc.destroy();
      }
      const hls = new Hls();
      setHlsInc(hls);
      hls.loadSource(vSrc);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        // video.play();
      });
      hls.on(Hls.Events.FRAG_LOADED, () => {
        setLoading(false);
      });

      hls.on(Hls.Events.ERROR, (event: any, data: Record<string, any>) => {
        if (data.details === 'manifestLoadTimeOut') {
          setLoading('error');
        }
      });
    } else if (video && video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = vSrc;
    }
  }

  function handleFullScreen() {
    if (!videoRef || !videoRef.current) return;
    if (fullScreen) {
      exitFullscreen();
    } else {
      launchFullScreen(videoRef.current);
    }
  }
  function setActiveVideoChange(item: any, index: number) {
    setActiveVideo(item);
    setActiveNum(index);
  }
  useEffect(() => {
    handleSrcUpdate(url);
    return () => {
      if (hlsInc) {
        hlsInc.destroy();
      }
    };
  }, [url]);

  useEffect(() => {
    function canplay() {
      setLoading(false);
    }
    function loadstart() {
      setLoading(true);
    }
    if (videoRef && videoRef.current) {
      videoRef.current.addEventListener('canplay', canplay);
      videoRef.current.addEventListener('loadstart', loadstart);
    }

    return () => {
      if (videoRef && videoRef.current) {
        videoRef.current.removeEventListener('canplay', canplay);
        videoRef.current.removeEventListener('loadstart', loadstart);
      }
    };
  }, [videoRef]);
  return (
    <VideoBox style={style}>
      <VideoComp
        style={{ flex: '1' }}
        onMouseEnter={() => setMouseEnter(true)}
        onMouseLeave={() => setMouseEnter(false)}
      >
        {loading === 'error' && (
          <Error>
            <ErrorContent>
              <img
                className="errorImg"
                src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/0b681dee-b04c-4340-80ed-bda820537ff2.svg"
              />
              <div>
                重新加载&nbsp;
                <img
                  className="refresh-img"
                  onClick={() => handleSrcUpdate(url)}
                  src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/cde7039a-33a4-4a3b-a967-e080232dd5a2.svg"
                />
              </div>
            </ErrorContent>
          </Error>
        )}
        <Spin
          size="small"
          spinning={!!loading}
          wrapperClassName={loading === 'error' ? 'hidden' : 'spin'}
        >
          <>
            <video muted ref={videoRef} loop autoPlay />
            {mouseEnter && loading === false && (
              <div className="addr">
                {/* <span title={title} className="desc">
                {title}
              </span> */}
                <span onClick={handleFullScreen} className="full">
                  <img src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/0c77d3b0-0316-41f7-927e-7ce543d77c37.png" />
                </span>
              </div>
            )}
            <div className="video-title">{title}</div>
          </>
        </Spin>
      </VideoComp>
      {manVideo && (
        <div className="video-list">
          {data.map((item: any, index: any) => {
            return (
              <div
                onClick={() => setActiveVideoChange(item, index)}
                className={['video-list-label'].join(' ')}
                style={
                  activeNum === index
                    ? {
                        marginLeft: '10px',
                        color: colorRgb(themeList.colorList[0]),
                        background: colorRgb(themeList.colorList[0], 0.4),
                      }
                    : {}
                }
                key={index}
              >
                {item.title}
              </div>
            );
          })}
        </div>
      )}
    </VideoBox>
  );
};

export default SingleVideo;