import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import './index.less';
import {
    Player,
    ControlBar,
    ReplayControl,
    ForwardControl,
    CurrentTimeDisplay,
    TimeDivider,
    PlaybackRateMenuButton,
    VolumeMenuButton,
    BigPlayButton
} from 'video-react';
import 'video-react/dist/video-react.css';
export interface propsObj {
    title:boolean,
    titleStyle: React.CSSProperties, //播放器title样式
    sourceList: Array<{ id?: any, name?: string, url?: string, [propName: string]: any; }> //播放列表
    sourceListPosition: string,//播放列表位置
    listTrigger: string,
    titleContent:React.ReactNode,
    replayControl:boolean,
    replayStep:number,
    forwardControl:boolean,
    forwardStep:number,
    changeControl: boolean,
    playlist: boolean,
    speedControl:boolean,
    rates:Array<number>,
    volumeControl:boolean,
    // titleStyle:object,
}

const Gplayer = ({
    title = false,
    titleStyle = {},
    sourceList = [],
    sourceListPosition = 'right',
    titleContent = null,
    replayControl = true,
    replayStep = 15,
    forwardControl = true,
    forwardStep = 15,
    changeControl = true,
    playlist = false,
    speedControl = true,
    volumeControl  = true,
    rates = [5, 2, 1,0.75, 0.5]
}: propsObj) => {
    let playerRef: any = null
    const [currentSource, changeSource] = useState(sourceList && sourceList.length ? { url: sourceList[0].url, index: 0, name: sourceList[0].name } : null)
    const [showList, toggleShowList] = useState(false)
    const changePlaySource = (direction: number) => {
        let currentIndex: any = currentSource?.index
        if (direction === 1) {//下一个
            if (currentIndex === sourceList.length - 1) {
                currentIndex = 0
            } else {
                currentIndex++
            }
        } else if (direction === -1) {//上一个
            if (currentIndex === 0) {
                currentIndex = sourceList.length - 1
            } else {
                currentIndex--
            }
        }
        changeSource({ url: sourceList[currentIndex].url, index: currentIndex, name: sourceList[currentIndex].name })
        playerRef.load();
    }
    return (
        <div className="ewec_ui_palyer_container">
            {title && <div className="ewec_ui_palyer_title" style={titleStyle}>
                {titleContent?titleContent:currentSource?.name}
            </div>}
            <div className="ewec_ui_palyer_content">
                <Player height='100%' autoPlay ref={(player: any) => {
                    playerRef = player;
                }}>
                    <source src={currentSource?.url} />
                    <ControlBar autoHide={false}>
                        {/* 后退控件 */}
                        <ReplayControl seconds={10} order={1.3} disabled = {!replayControl}/>
                        {/* 前进控件 */}
                        <ForwardControl seconds={30} order={1.4} disabled = {!forwardControl}/>

                        {/* 上/下一个控件 */}
                        {changeControl &&[<div className='ewec_ui_palyer_operate_prev' order={1.1}>
                            <div className="ewec_ui_palyer_operate_prev_box" onClick={()=>changePlaySource(-1)}>
                                <div className='ewec_ui_palyer_operate_prev_icon_line'></div>
                                <div className="ewec_ui_palyer_operate_prev_icon"></div>
                            </div>
                        </div>,
                        <div className='ewec_ui_palyer_operate_prev' order={1.2}>
                            <div className="ewec_ui_palyer_operate_next_box" onClick={()=>changePlaySource(1)}>
                                <div className="ewec_ui_palyer_operate_next_icon"></div>
                                <div className='ewec_ui_palyer_operate_prev_icon_line'></div>
                            </div>
                        </div>]}
                        <CurrentTimeDisplay order={4.1} />
                        <TimeDivider order={4.2} />

                        {/* 播放速率控件 */}
                        <PlaybackRateMenuButton rates={rates} order={7.1} disabled = {!speedControl}/>
                        {/* 声音控件 */}
                        <VolumeMenuButton vertical disabled = {!volumeControl} />
                    </ControlBar>
                    <BigPlayButton position="center" />
                </Player>
                {playlist && <div className={"ewec_ui_palyer_list_container_" + sourceListPosition}>
                    {!showList && <div className="ewec_ui_palyer_list_show"
                        onClick={() => { toggleShowList(true) }}
                    >
                        <div className="ewec_ui_palyer_list_show_icon"></div>
                    </div>}
                    {showList && <div className="ewec_ui_palyer_source_list">
                        {sourceListPosition == 'right' && <div className="ewec_ui_palyer_list_close" onClick={() => { toggleShowList(false) }}>
                            <div className="ewec_ui_palyer_list_close_icon"></div>
                        </div>}
                        <div className="ewec_ui_palyer_source_list_box">
                            {
                                sourceList.map((item: any, index) => {
                                    return (
                                        <div
                                            className={currentSource?.index == index ? "ewec_ui_palyer_source_list_item_play" : "ewec_ui_palyer_source_list_item"}
                                            key={index} onClick={() => { changeSource({ url: item.url, index, name: item.name }); playerRef.load(); }}>
                                            {item.name}
                                        </div>
                                    )
                                })
                            }
                        </div>
                        {sourceListPosition == 'left' && <div className="ewec_ui_palyer_list_close" onClick={() => { toggleShowList(false) }}>
                            <div className="ewec_ui_palyer_list_close_icon"></div>
                        </div>}

                    </div>}
                </div>}
            </div>
        </div>
    );
};
export default Gplayer;