import * as React from 'react';
import videojs, { VideoJsPlayer } from 'video.js';
import videozhCN from 'video.js/dist/lang/zh-CN';
import 'videojs-flash';
import 'videojs-contrib-hls';
import 'video.js/src/css/video-js.scss';
import './index.scss';
import { useVideoKeppLive } from '../../hooks/video';
interface Iprops {
	autoplay?: boolean;
	controls?: boolean;
	sessionid: string;
	sources?: { type: string; src: string }[] | undefined;
	checked?: boolean;
	onClick?: () => void;
	onClose?: () => void;
}
/**
 * @description video播放器
 */
export const videoComponent: React.FC<Iprops> = React.memo((props) => {
	const { autoplay = true, controls = true, onClick } = props;
	if (!props.sources) {
		return (
			<div
				data-checked={!!props.checked}
				className='video-noLive-wrapper'
				onClick={onClick}></div>
		);
	}
	const { request: requestKeppLive } = useVideoKeppLive();
	const videoContainerRef = React.useRef<HTMLVideoElement>(null);
	const timeIntervalRef = React.useRef<number>(0);
	const videoRef = React.useRef<VideoJsPlayer | null>(null);
	React.useEffect(() => {
		// 如果已经存在播放器了
		if (videoRef.current && videoRef.current.player && props.sources) {
			const currentSource = videoRef.current.currentSource();
			// 如果传输得地址当中，没有一个是匹配正在播放得地址，则代表需要重新加载
			if (
				!props.sources.find((element) => {
					if (
						element.src === currentSource.src &&
						element.type === currentSource.type
					) {
						return true;
					}
				})
			) {
				videojs.log('重新加载');
				videoRef.current.src(props.sources);
				videoRef.current.load();
				return;
			}
		}
		// 没有播放器，则重新创建播放器
		if (!videoRef.current && props.sources) {
			const player = videojs(
				videoContainerRef.current,
				{
					autoplay: autoplay,
					controls: controls,
					language: 'zh-CN',
					techOrder: ['html5', 'flash'],

					html5: {
						vhs: {
							overrideNative: true,
							enableLowInitialPlaylist: true,
						},
					},

					sources: props.sources ? props.sources : undefined,
					controlBar: {
						children: [
							{
								name: 'playToggle', //播放按钮
							},
							{
								name: 'volumePanel', // 音量控制
							},
							{ name: 'FullscreenToggle' }, // 全屏
							{ name: 'durationDisplay' }, // 总时间
							{ name: 'progressControl' }, // 播放进度条
							{ name: 'currentTimeDisplay' }, // 当前已播放时间
						],
					},
				},
				function() {
					const playerInstance: any = player;
					videojs.log('Your player is ready!');
					console.log(player.getMedia());
					if (playerInstance.hls) {
						playerInstance.hls.xhr.beforeRequest = function(options) {
							options.uri = options.uri + '?random=' + Date.now();
							return options;
						};
					}

					player.on('error', function() {
						console.log('出错');
					});
					player.play();
					player.on('ended', function() {
						videojs.log('Awww...over so soon?!');
					});
				}
			);

			console.log(player.error());

			videoRef.current = player;
		}
	}, [props.sources]);

	React.useEffect(() => {
		if (props.sessionid) {
			timeIntervalRef.current = window.setInterval(() => {
				requestKeppLive({ session_id: props.sessionid }).then(() => {
					if (videoRef.current) {
						console.log(videoRef.current.hasStarted());
					}
				});
			}, 50 * 1000);
		}
		return () => {
			window.clearInterval(timeIntervalRef.current);
		};
	}, [props.sessionid]);
	React.useEffect(() => {
		return () => {
			videojs.log('播放器即将销毁');
			if (videoRef.current) {
				videoRef.current.dispose();
			}
		};
	}, []);
	return (
		<div
			className='video-player-wrapper'
			data-checked={!!props.checked}
			onClick={(event) => {
				if ('DIV' === (event.target as any).tagName) {
					props.onClick && props.onClick();
				}
			}}>
			<video ref={videoContainerRef} className='video-js'>
				{props.sources.map((element) => {
					return (
						<source key={element.src} src={element.src} type={element.type} />
					);
				})}
			</video>
		</div>
	);
});
export default videoComponent;
