import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, TouchableWithoutFeedback, TouchableOpacity, TouchableNativeFeedbackBase, ActivityIndicator, StatusBar, DeviceEventEmitter } from 'react-native'
import Slider from "@react-native-community/slider"
import Video from "react-native-video"
import { height, px2dp, width } from '../../utils/base';
import SystemSetting from 'react-native-system-setting'
import { navigate } from '../../NavigationService';
// import Orientations from 'react-native-orientation';

export interface Props {
    url?: string,
    activeIndex: number
    index: any

}

export interface State {
    paused: boolean
    showIcon: boolean
    duration: number
    currentTime: number
    sliderTime: number
    maximumValue: number
    sliderValue: number
    isHorizontal: boolean
    isChangeSlider: boolean
    isFastPlay: boolean
    isLoad: boolean

}

export default class VideoPlayer extends React.Component<Props, State> {
    constructor(props: Props | Readonly<Props>) {
        super(props);

    }
    componentDidMount() {
        // Orientations.lockToPortrait();
        StatusBar.setBarStyle("dark-content")
        StatusBar.setBackgroundColor("rgba(0,0,0,0)")
        let { paused } = this.state;
        this.unActiveVideoAddlistener = DeviceEventEmitter.addListener("unActiveVideo", (e) => {
            console.log("结果二")
            paused = true
            this.setState({ paused })
            // this.playerRef.setNativeProps({
            //     paused: paused
            // })
        })

        this.videoAddlistener = DeviceEventEmitter.addListener("activeVideo", (e) => {
            console.log("打印结果1", e.activeIndex)
            if (this.props.index == e.activeIndex) {
                paused = false
            } else {
                paused = true
            }
            this.setState({ paused })
            // this.playerRef.setNativeProps({
            //     paused: paused
            // })

        })
    }

    componentWillUnmount() {
        this.videoAddlistener && this.videoAddlistener.remove()
        this.unActiveVideoAddlistener && this.unActiveVideoAddlistener.remove()
    }

    public readonly state: Readonly<State> = {
        paused: true,
        showIcon: true,
        duration: 1,//视频时长
        currentTime: 0,//当前时
        sliderTime: 0,
        maximumValue: 1,
        sliderValue: 0,
        isHorizontal: true,
        isChangeSlider: false,
        isFastPlay: false,
        isLoad: false
    }

    public showIcon = false
    public videoWidth = width - px2dp(25)
    public videoHeight = px2dp(200)
    public playerRef = null
    public lastOnPressTime = 0
    public thisOnPressTime = 0
    public videoData = null
    public timer = null
    public videoAddlistener = null
    public unActiveVideoAddlistener = null


    onShowIcon = () => {
        this.timer && clearTimeout(this.timer)
        let { paused, showIcon } = this.state;
        showIcon = true
        this.setState({
            showIcon
        })
        this.timer = setTimeout(() => {
            this.setState({ showIcon: !showIcon })
        }, 1500);
    }

    onChangePlayStatus = () => {
        this.timer && clearTimeout(this.timer)
        let { paused, showIcon, isChangeSlider } = this.state;
        isChangeSlider = false
        // if (isFirstShowIcon) {
        this.setState({
            paused: !paused,
            isChangeSlider

        })
        this.timer = setTimeout(() => {
            this.setState({
                showIcon: false
            })
        }, 1500);
    }

    onValueChange = (e) => {
        console.log("打印一下：", e)
        this.timer && clearTimeout(this.timer)
        let { currentTime, duration, isChangeSlider, showIcon, isFastPlay } = this.state;
        currentTime = e * duration
        isChangeSlider = true
        isFastPlay = true
        showIcon = true
        // sliderTime = "0" + Number((e * duration / 100)).toFixed(2)
        this.setState({
            currentTime,
            isChangeSlider,
            isFastPlay,
            showIcon
        })
        this.playerRef.seek(currentTime);
        this.timer = setTimeout(() => {
            this.setState({
                isChangeSlider: false,
                isFastPlay: false,
                showIcon: false
            })
        }, 600);
    }


    showTime(val: number) {
        val = ~~val
        if (val < 60) {
            if (val < 10) {
                return "00:" + "0" + val.toFixed(0)
            } else {
                return "00:" + val.toFixed(0)
            }
        } else {
            var min_total = Math.floor(val / 60); // 分钟
            var sec = Math.floor(val % 60); // 余秒
            // console.log("sec", sec)
            if (min_total < 60) {
                if (min_total < 10) {
                    if (sec < 10) {
                        return "0" + min_total + ":0" + sec.toFixed(0)
                    } else {
                        return "0" + min_total + ":" + sec.toFixed(2)
                    }
                } else {
                    if (sec < 10) {
                        return min_total + ":0" + sec.toFixed(0)
                    } else {
                        return min_total + ":" + sec.toFixed(0)
                    }
                }
                // return min_total + "分钟" + secStr + "秒";
            } else {
                var hour_total = Math.floor(min_total / 60); // 小时数
                var min = Math.floor(min_total % 60); // 余分钟
                if (min < 10) {
                    if (sec < 10) {
                        return "0" + hour_total + ":0" + min + ":0" + sec.toFixed(0)
                    } else {
                        return hour_total + ":" + min + ":" + sec.toFixed(0)
                    }
                } else {
                    if (sec < 10) {
                        return min + ":0" + sec.toFixed(0)
                    } else {
                        return min + ":" + sec.toFixed(0)
                    }
                }
                // return hour_total + "小时" + min + "分钟" + sec + "秒";
            }
        }
    }

    // 拖动进度条时候
    // 0-1 ---》curtime时间---》显示转化
    // 播放的时候
    // curtime--->0-1----》显示转化

    onLoadStart = () => {
        let { isLoad } = this.state;
        isLoad = true
        this.setState({
            isLoad
        })
    }

    //刚加载时
    onLoad = (e) => {
        let { duration, maximumValue, isLoad } = this.state;
        duration = e && e.duration
        // console.log("打印视频总时长:", e)
        this.videoData = e
        maximumValue = duration
        isLoad = true
        this.setState({
            duration, maximumValue, isLoad

        })
        if (e.naturalSize.height > e.naturalSize.width) {
            this.setState({
                isHorizontal: false
            })
            console.log("竖屏")
        } else if (e.naturalSize.height <= e.naturalSize.width) {
            this.setState({
                isHorizontal: true
            })
            console.log("横屏")
        }
    }

    //视频播放时
    onProgress = (e) => {
        console.log("打印进度:", e)
        let { currentTime, sliderTime, duration, sliderValue, paused } = this.state;
        currentTime = e && e.currentTime
        sliderValue = currentTime / duration
        console.log('打印进度条：', sliderValue)
        this.setState({
            currentTime,
            sliderValue
        })
    }

    onAllScreen = () => {
        this.jumpVideoView()
    }

    jumpVideoView = () => {
        let { isHorizontal } = this.state;
        let { url } = this.props;
        let videoData = this.videoData
        navigate("VideoView", { isHorizontal, videoData, url })
    }


    onEnd = () => {
        let { currentTime, sliderTime, duration, sliderValue, paused } = this.state;
        currentTime = 0,
            sliderValue = 0,
            paused = true,

            this.playerRef.seek(currentTime);
        this.setState({
            currentTime,
            sliderValue,
            paused
        })

    }

    render() {
        let { paused, showIcon, maximumValue, sliderValue, isChangeSlider, isFastPlay, isLoad } = this.state;
        let { url, index, } = this.props;
        // console.log("isLoad", isLoad)

        return (
            <View style={styles.main}>
                {/* oid扩展文件使用

                //在你的渲染功能,假设你有一个名为
                //“background.mp4”在您的扩展文件.只需添加主要和（如果适用）补丁版本 */}
                {/* < Video source={{ uri: "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4", mainVer: 1, patchVer: 0 }}//在给定的扩展版本中查找.mp4文件（background.mp4）. */}
                < Video source={{ uri: url ? url : "http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4", mainVer: 1, patchVer: 0 }}//在给定的扩展版本中查找.mp4文件（background.mp4）.
                    // <Video source={require("../../assets/test.mp4")}//在给定的扩展版本中查找.mp4文件（background.mp4）.
                    ref={c => { this.playerRef = c }}
                    rate={1.0}                   //0暂停,1是正常的.
                    volume={1.0}                 //0静音,1是正常的.
                    muted={false}                //完全静音.
                    paused={paused}               //完全暂停播放.
                    resizeMode="cover"           //以纵横比填充整个屏幕.
                    repeat={false}                //永远重复.
                    onLoad={this.onLoad}
                    // onProgress={this.onProgress}
                    // onLoadStart={this.onLoadStart}//视频开始加载时的回调
                    // onLoad={this.setDuration}    //视频加载时的回调
                    // onProgress={this.时刻设定}    //回调每250毫秒〜与currentTime的
                    onEnd={this.onEnd}           //播放完成时的回调
                    // onError={this.videoError}    //视频无法加载时回调
                    style={styles.backgroundVideo}
                />
                {
                    isLoad ? <>
                        <TouchableWithoutFeedback onPress={this.onShowIcon} >
                            <View style={styles.overflowStyle}>
                                {
                                    showIcon ?
                                        <TouchableOpacity onPress={this.onChangePlayStatus} style={[styles.iconStyle, { width: px2dp(20), height: px2dp(20), marginTop: px2dp(-20) }]}>
                                            <Image source={paused ? require('../../assets/start-write-icon.png') : isFastPlay ? require('../../assets/fast-play-icon.png') : require('../../assets/stop-write-icon.png')} style={styles.iconStyle} />
                                        </TouchableOpacity> : null
                                }
                                <View style={styles.sliderBox}>
                                    <Text style={[styles.progresTextStyle, { textAlign: "right", marginRight: px2dp(-6) }]}>{this.showTime(this.state.currentTime)}</Text>
                                    <Slider
                                        minimumTrackTintColor={"#f6f6f6"}
                                        maximumTrackTintColor={"#f6f6f6"}
                                        thumbTintColor="#fff"
                                        value={sliderValue}
                                        style={styles.sliderStyle}
                                        onValueChange={this.onValueChange}
                                    />
                                    <Text style={[styles.progresTextStyle, { textAlign: "left", marginLeft: px2dp(-10) }]}>{this.showTime(this.state.duration)}</Text>
                                    <View style={[styles.progresTextStyle,]}>
                                        <TouchableOpacity onPress={this.onAllScreen} style={styles.allScreenBox}>
                                            <Image source={require('../../assets/full-screen-icon.png')} style={styles.allScreenStyle} />
                                        </TouchableOpacity>
                                    </View>

                                </View>

                            </View>
                        </TouchableWithoutFeedback >
                        <View style={[styles.overflowStyle, { zIndex: 998 }]}>
                            {

                                isChangeSlider ? <Text style={styles.overflowCurrentTimeText}>{this.showTime(this.state.currentTime)}</Text> : null
                            }
                        </View>
                    </>
                        :
                        <View style={styles.loadingBoxStyle}>
                            <ActivityIndicator size="small" color="#fff" />
                        </View>
                }

            </View >
        );

    }
}
const styles = StyleSheet.create({
    main: {
        width: width - px2dp(25),
        height: px2dp(200),
        marginLeft: px2dp(12.5),
        // paddingTop: px2dp(100),
        backgroundColor: "#000",

    },
    backgroundVideo: {
        width: width - px2dp(25),
        height: px2dp(200),
        backgroundColor: "#000",

    },
    overflowStyle: {
        // width: px2dp(32),
        // height: px2dp(32),
        width: width - px2dp(25),
        height: px2dp(200),
        justifyContent: "center",
        // alignItems: "center",
        zIndex: 999,
        marginTop: px2dp(-200)
    },
    iconStyle: {
        width: px2dp(28),
        height: px2dp(28),
        alignSelf: "center",
        // marginTop: px2dp(-10)
        // backgroundColor: "#f6f6f6"
    },
    sliderBox: {
        position: "absolute",
        width: width - px2dp(25),
        paddingHorizontal: px2dp(10),
        flexDirection: "row",
        // justifyContent: "center",
        bottom: px2dp(10)
    },

    progresTextStyle: {
        width: px2dp(50),
        height: px2dp(20),
        lineHeight: px2dp(20),
        alignItems: "center",
        color: "#f6f6f6",
        fontSize: 10,
        // backgroundColor: "red"
    },

    sliderStyle: {
        width: width - px2dp(165),
        // backgroundColor: 'blue',
        // bottom: px2dp(10)
    },
    miniSlider: {
        width: width / 3,
        height: px2dp(5)
    },
    allScreenBox: {
        // backgroundColor: "red",
        height: px2dp(20),
        width: px2dp(20),
        justifyContent: "center",
        alignItems: "flex-end"
    },
    allScreenStyle: {
        width: px2dp(18),
        height: px2dp(18)
    },
    overflowCurrentTimeText: {

        color: "#fff",
        textAlign: "center",
        fontSize: 24,
        zIndex: 99,
        opacity: 0.7,
        marginTop: px2dp(-70)
    },
    loadingBoxStyle: {
        width: width - px2dp(25),
        height: px2dp(200),
        backgroundColor: "#000",
        justifyContent: "center",
        alignItems: "center",
        marginTop: px2dp(-200)
    }
})