// Learn cc.Class:
//  - https://docs.cocos.com/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {
        this.init();
    },

    barBaseW: null,
    barSpr: null,
    barSf: null,
    barBtn: null,
    init() {

        this.initProgress();
        this.initVideoBtn();
        this.addListener();
    },

    initProgress() {

        this.bar = cc.find('progress/bar', this.node);
        this.barBtn = cc.find('progress/btn', this.node);

        this.barBaseW = 710 //this.bar.width;
        this.barSpr = this.bar.getComponent(cc.Sprite);
        this.barSf = this.barSpr.spriteFrame;

        this.setProgress(0);
    },

    isPlaying: null,
    initVideoBtn() {
        const videoBtn = cc.find('btn', this.node);
        this.videoPlayIcon = cc.find('btn/play', this.node);
        this.videoPauseIcon = cc.find('btn/pause', this.node);
        this.isPlaying = false;

        videoBtn.addComponent(cc.Button);
        videoBtn.on('click', () => {

            if (this.isPlaying) {
                this.isPlaying = !this.isPlaying;
                this.playVideo();
            } else {
                this.isPlaying = !this.isPlaying;
                this.pauseVideo();
            }

        });
    },

    playVideo() {
        this.refreshVideoBtnState();
        this.node.emit('video_btn_click', {isPlaying: this.isPlaying})
    },

    pauseVideo() {
        this.refreshVideoBtnState();
        this.node.emit('video_btn_click', {isPlaying: this.isPlaying})
    },

    refreshVideoBtnState() {
        if (this.isPlaying) {
            this.videoPlayIcon.active = false;
            this.videoPauseIcon.active = true;
        } else {

            this.videoPlayIcon.active = true;
            this.videoPauseIcon.active = false;
      
        }
    },

    addListener() {

        this.node.on('video_play_end', () => {
            this.isPlaying = false;
            this.refreshVideoBtnState();
        })

        this.barBtn.minX = 0;
        this.barBtn.maxX = this.bar.width;
        this.barBtn.on('touchstart', () => {
            console.log(' 111111111 ');
            // this.curTouchBar = this.barBtn;

            // if (this.isPlaying) {
            //     this.isPlaying = !this.isPlaying;
            //     this.playVideo();
            // } 
        })

        this.node.on('touchend', () => {
            this.curTouchBar = null;
        })
        this.node.on('touchcancel', () => {
            this.curTouchBar = null;
        })
    },


    setProgress(progress) {

        setTimeout(() => {
            if (!this.barSf || !this.bar) {
                return;
            }
            const w = this.barBaseW * progress;

            const rect = this.barSf.getRect();
            rect.width = w;
            this.bar.width = w;
            this.barSpr.spriteFrame.setRect(rect);
            this.barBtn.x = this.bar.width;

        }, 1);

    },

    // update (dt) {},
});
