/** @format */

import { Spin } from 'antd';
import Hls from 'hls.js';
import merge from 'lodash/merge';
import React, { useEffect, useRef, useState } from 'react';

import { Error, ErrorContent, VideoComp } from './styled';

const styleBase = {
  width: 460,
  height: 260,
};

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>;
  url: string;
  title?: string;
  data?: Record<string, any>[];
}

const SingleVideo = (props: SingleVideoProps) => {
  const { size, url, title, data = [] } = props;
  const [mouseEnter, setMouseEnter] = useState(false);
  const [loading, setLoading] = useState<any>(true);
  const [hlsInc, setHlsInc] = useState<any>(null);
  const [fullScreen, setFullScreen] = useState(false);
  const [currentTitle, setCurrentTitle] = useState(getCurrentData().title);
  const [currentUrl, setCurrentUrl] = useState<string>(getCurrentData().url);

  const videoRef = useRef<HTMLVideoElement>(null);
  const style = merge(styleBase, size);

  function getCurrentData() {
    const dataSourceText =
      data && data.length ? data[0] && data[0].title : null;
    const dataSourceUrl = data && data.length ? data[0] && data[0].url : null;
    const _title =
      typeof dataSourceText !== 'undefined' && dataSourceText !== null
        ? dataSourceText
        : title;
    const _url =
      typeof dataSourceUrl !== 'undefined' && dataSourceUrl !== null
        ? dataSourceUrl
        : url;
    return {
      title: _title,
      url: _url,
    };
  }

  useEffect(() => {
    const { title, url } = getCurrentData();
    setCurrentTitle(title);
    setCurrentUrl(url);
  }, [title, data]);

  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>) => {
        console.warn(data.type, data.details);
        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);
    }
  }

  useEffect(() => {
    handleSrcUpdate(currentUrl);
    return () => {
      if (hlsInc) {
        hlsInc.destroy();
      }
    };
  }, [currentUrl]);

  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 (
    <VideoComp
      style={style}
      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(currentUrl)}
                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={currentTitle} className="desc">
                {currentTitle}
              </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>
          )}
        </>
      </Spin>
    </VideoComp>
  );
};

export default SingleVideo;