import React, { useRef, useState, useCallback } from 'react';

import './style.scss';

const typeCheckFactory = (typeName: string) => {

    return (arg: any) => {

        if (typeof arg == typeName) {

            return true;

        } else {

            return false;

        }

    };

};

export const isNumber = typeCheckFactory('number') as (

    arg: any,

) => arg is number;

function setUnit(value: string | number) {

    return isNumber(value)

        ? value + 'px'

        : ~value.indexOf('%') || !/^\d+$/.test(value)

        ? value

        : value + 'px';

}

function zeroFill(num: number) {

    if (num < 10) {

        return '0' + num;

    }

    return num;

}

const timerTarget: { bufferTimer: NodeJS.Timeout | null } = {

    bufferTimer: null,

};

export default function(props: {

    height: number | string;

    width: number | string;

    url: string;

    coverImage: string;

}) {

    const videoHeight = setUnit(props.height);

    const videoWidth = setUnit(props.width);

    const target = useRef<HTMLVideoElement>(null);

    // 0 play, 1 stop, 2 refresh

    const [videoState, setVideoState] = useState<0 | 1 | 2>(0);

    // 声音

    const [voice, setVoice] = useState<1 | 0>(0);

    // 当前时间

    const [currentTime, setCurrentTime] = useState<string | number>(`00:00`);

    // 进度

    const [progress, setProgress] = useState<string | number>(0);

    // 播放完成 1代表完成

    const [over, setOver] = useState<1 | 0>(0);

    function play() {

        target.current && target.current.play();

    }

    function pause() {

        target.current && target.current.pause();

    }

    const toggle = useCallback(

        function(jump = false) {

            if (

                (videoState == 0 || over == 1 || jump) &&

                target &&

                target.current

            ) {

                const current = target.current;

                if (over == 1 && !jump) {

                    setProgress(0);

                    setOver(0);

                    current.currentTime = 0;

                }

                play();

                setVideoState(1);

                timerTarget.bufferTimer = setInterval(function() {

                    const pgs = current.currentTime / current.duration;

                    if (pgs == 1) {

                        timerTarget.bufferTimer &&

                            clearInterval(timerTarget.bufferTimer);

                        setOver(1);

                    }

                    setProgress(pgs * 100 + '%');

                }, 1000 / 30);

            } else {

                timerTarget.bufferTimer &&

                    clearInterval(timerTarget.bufferTimer);

                pause();

                setVideoState(0);

            }

        },

        [over, videoState],

    );

    function toggleVoice(): void {

        setVoice((v) => (1 - v) as 1 | 0);

    }

    // 处理秒数为时分秒 h:m:s

    function getTime(num: number) {

        const m = zeroFill(Math.floor(num / 60)),

            remainder = zeroFill(Math.floor(num % 60)),

            time = m + ':' + remainder;

        return time;

    }

    function progressClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {

        e.stopPropagation();

        const currentTarget = e.currentTarget;

        const barLength = e.pageX - currentTarget.offsetLeft;

        timerTarget.bufferTimer && clearInterval(timerTarget.bufferTimer);

        if (target.current) {

            target.current.currentTime =

                (barLength / currentTarget.clientWidth) *

                target.current.duration;

            setProgress((barLength / currentTarget.clientWidth) * 100 + '%');

            toggle(true);

        }

    }

    return (

        <div

            className="jdw-video"

            style={{ height: videoHeight, width: videoWidth }}

        >

            <div

                className="mask"

                onClick={() => {

                    toggle(false);

                }}

            >

                {videoState == 0 && <div className="play"></div>}

                {videoState == 1 && (

                    <div

                        className="toolbar"

                        onClick={(e) => e.stopPropagation()}

                    >

                        <span

                            className="pause"

                            onClick={() => toggle(false)}

                        ></span>

                        <div className="progress" onClick={progressClick}>

                            <div

                                className="bar"

                                style={{ width: progress }}

                            ></div>

                        </div>

                        <span className="timer">

                            {currentTime}/

                            {getTime(

                                target && target.current

                                    ? target.current.duration

                                    : 0,

                            )}

                        </span>

                        <span

                            className={voice ? 'mute' : 'speak'}

                            onClick={toggleVoice}

                        ></span>

                    </div>

                )}

            </div>

            <video

                poster={props.coverImage}

                ref={target}

                height={props.height}

                width={props.width}

                muted={!!voice}

                onTimeUpdate={() => {

                    setCurrentTime(

                        getTime(

                            target && target.current

                                ? target.current.currentTime

                                : 0,

                        ),

                    );

                }}

            >

                <source src={props.url} type="video/ogg" />

                Your browser does not support the video tag.

            </video>

        </div>

    );

}