import * as React from "react";
import PropTypes from 'prop-types';
import MUtil from "../../../util/utils";


type defaultProps = {
    link: "https://www.94mxd.com/mxd/mfs/MjAxOTExMTMxNDQ1MTk2MDBlQlZLVHRLeEFo",//音频链接
    type: 1,//1:从头开始，2：从暂停位置开始
    title: "88888",//头像链接
    isLoop: 1,//头像气泡样式，1：居左，2：居右
}

type ContentData = {
    content: {
        link: string,//标题
        title: string,//副标题
        type: number,//背景颜色，16进制
        isLoop: number,//位置，1：居左，2：居中，3：居右
    }
} & defaultProps

interface LPData {
    content: Array<ContentData>,

    [propsName: string]: any
}

interface LPType {
    content: any,

    [propsName: string]: any
}

type IPropTypes = {
    source?: ContentData,
    [propsName: string]: any
}


const CLASS = 'm-Nvoice-';
let audioTimer, audioT, playAudio, audio, myAuto

class MPro extends React.Component<IPropTypes, any> {
    state: any;

    constructor(props: IPropTypes) {
        super(props);

        this.autoPlay = this.autoPlay.bind(this)
        this.canplayFn = this.canplayFn.bind(this)
        this.closePlay = this.closePlay.bind(this)
        this.getStart = this.getStart.bind(this)
        this.getEnd = this.getEnd.bind(this)
        this.getMove = this.getMove.bind(this)
        this.playAudio = this.playAudio.bind(this)


        this.state = {
            playAudioFlag: false,
            audioLength: "0",
            audioNum: 0,
            audioTwoFlag: false,
            audioThreeFlag: true,
            startNum: 0,
            startLength: 0,
            pageStart:0,
            pageEnd:0,
            width:(document.documentElement.clientWidth || document.body.clientWidth)>=750?
                750:(document.documentElement.clientWidth || document.body.clientWidth)
        }

    }

    componentDidMount(): void {
        console.log(audio)
        myAuto = document.getElementById(this.props.link);

    }

    componentWillUnmount() {
        clearInterval(audioTimer)
        clearInterval(audioT)
        clearInterval(playAudio)
    }


    canplayFn() {
        let x = audio.readyState;
        if (x == 4) {
            clearInterval(audioTimer)
            this.setState({
                audioNum: audio.duration
            })
        }
    }

    autoPlay(isLoop) {
        myAuto.play();
        let length = this.state.audioNum,
            startNum = this.state.startNum,
            startLength = this.state.startLength,
            lengthTotal = audio.duration || this.state.audioNum

        playAudio = setInterval(() => {
            length--
            startNum++

            startLength = (startNum / lengthTotal)

            if (length < 1) {
                clearInterval(playAudio)
                startLength = 0
                startNum = 0
                this.setState({
                    startLength: startLength,
                    startNum:startNum
                })
                if(isLoop == 1){
                    myAuto.load();
                    this.autoPlay(isLoop)
                }
            }else{
                this.setState({
                    startLength: startLength,
                    startNum:startNum
                })
            }

        }, 1000)
    }

    closePlay(type) {
        // let myAuto = document.getElementById('audio');
        myAuto.pause();
        if (type == 1) {
            myAuto.load();
            this.setState({
                startLength: 0,
                startNum:0
            })
        }
        // myAuto.load();
    }

    playAudio(flag, length, type,isLoop) {
        if (flag) {
            this.closePlay(type)
            clearInterval(playAudio)
            // this.setState({
            //     audioTwoFlag: false,
            //     audioThreeFlag: true,
            // })
        } else {
            this.autoPlay(isLoop)
        }
        this.setState({
            playAudioFlag: !flag
        })
    }

    getStart(audioNum,startNum,pageStart,pageEnd,e){
        let page = e.targetTouches[0]
        pageStart = page.pageX
        this.setState({
            pageStart:pageStart
        })

    }

    getMove(audioNum,startNum,pageStart,pageEnd,e){
        let page = e.targetTouches[0]
        pageEnd = page.pageX

        let length = pageEnd - pageStart,
            lengthTotal = audio.duration,
            width = (document.documentElement.clientWidth || document.body.clientWidth) - 80,
            newLength = 0

        newLength = Math.abs(startNum+length)

        if(newLength>=lengthTotal){
            newLength = lengthTotal
        }

        if(newLength<=0){
            newLength = 0
        }

        let startLength = (newLength / lengthTotal)

        this.setState({
            pageEnd:pageEnd,
            startLength:startLength,
        })
    }

    getEnd(audioNum,startNum,pageStart,pageEnd,e){
        let length = pageEnd - pageStart,
            lengthTotal = audio.duration

        startNum += length

        if(startNum>=lengthTotal){
            startNum = lengthTotal
        }

        if(startNum<=0){
            startNum = 0
        }

        audio.currentTime = audio.buffered.end(audio.buffered.length-1)

        let startLength = (startNum / lengthTotal)

        this.setState({
            pageEnd:pageEnd,
            startLength:startLength,
            startNum:startNum,
        })
    }




    render() {
        let source = this.props;
        let content = source;

        let length = (this.state.startLength*100)+"%"


        return (
            <div className={'lib-pro lib-pro2'}>
                {
                    content ? <div className={CLASS + 'bg'}>
                        <p
                            className={CLASS + 'title'}
                            style={{
                                'marginBottom':content.title&&content.title.length>0?"10px":"0"
                            }}
                        >{content.title}</p>
                        <div className={CLASS + 'audio'}>

                            <i className={' icon-base ' +
                                (!this.state.playAudioFlag ?
                                    "icon-audio-switch" : "icon-audio-stop")
                            }
                               onClick={this.playAudio.bind(this, this.state.playAudioFlag, this.state.audioNum, content.type,content.isLoop)}
                            ></i>

                            <div className={CLASS + 'line'}>

                                <div className={CLASS + 'startLength'}
                                     style={{
                                         width: length
                                     }}>
                                </div>

                                <i className={CLASS + 'icon' + " icon-audio-flag icon-base"}
                                   style={{left:"calc("+(length)+" - 3px)"}}
                                   // onTouchStart={this.getStart.bind(this,this.state.audioNum,this.state.startNum,this.state.pageStart,this.state.pageEnd)}
                                   // onTouchMove={this.getMove.bind(this,this.state.audioNum,this.state.startNum,this.state.pageStart,this.state.pageEnd)}
                                   // onTouchEnd={this.getEnd.bind(this,this.state.audioNum,this.state.startNum,this.state.pageStart,this.state.pageEnd)}
                                ></i>

                            </div>

                            <audio
                                className={CLASS + "mp3Audio"}
                                id={content.link}
                                onCanPlay={this.canplayFn}
                                src={content.link}
                                ref={(e) => {
                                    audio = e
                                }}
                            >
                                您的浏览器不支持音频播放
                            </audio>
                        </div>
                    </div> : ''
                }
            </div>
        );
    }
}

export default MPro;