import {
	getVideoUrl, buttonOnClick, playAudioByUrl,
} from "../script/util";

import { MyCocosSceneComponent } from "./MyCocosSceneComponent";

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends MyCocosSceneComponent {

    @property(cc.Node)
    dot: cc.Node = null;
    
    @property(cc.Node)
    processBg: cc.Node = null;
    
    @property(cc.Node)
    process: cc.Node = null;
    
    @property(cc.Node)
	playBtn: cc.Node = null;

    @property(cc.VideoPlayer)
	videoplayer: cc.VideoPlayer = null;

    dotX = null;
    processX = null;
    onLoad () {
        this.dotX = this.dot.x;
        this.processX = this.process.x;
        this.initListener();
    }

    rowData = null;
    start () {
		
    }
    onEnable () {
        this.rowData = this.node["rowData"];
        this.dot.x = this.dotX;
        this.process.width = 0;
        this.preloadRecorder();
        this.prePlayIndex = 0;

        this.videoplayer.remoteURL = this.rowData.video_url+`?t=${Date.now()}`;
    }

    preloadRecorder() {
        const preloadArr = this.rowData.item_arr.map((item) => {
            return {url: item.audio_url};
        });
        cc.assetManager.loadAny(preloadArr);
    }

    updateVideoStrip() {
		if (!this.videoplayer?.isPlaying()) {
			return;
		}
		let percent;
		const duration = this.videoplayer.getDuration();
		if (!duration) {
			percent = 0;
		} else {
			percent = this.videoplayer.currentTime / duration;
		}
		this.setProgress(percent);
    }
    
	setProgress(progress) {
		setTimeout(() => {
            const w = this.processBg.width * progress;
            this.process.width = w;
            this.dot.x = this.dotX + w -5;
        }, 1);
    }
    
    closeVideo() {
        this.videoplayer.stop();
        if (this.playAudioId!=null) {
            cc.audioEngine.stop(this.playAudioId);
        }
        this.dot.x = this.dotX;
        this.process.width = 0;
        cc.find(`Canvas/videoContainer`).active = false;
        cc.find(`Canvas/bg`).opacity = 255;
        cc.find("Canvas/reportdetail").opacity = 255;
    }

    initListener() {
        const back = cc.find(`Canvas/videoContainer/back`);
        buttonOnClick(back, () => {
            this.closeVideo();
        }, 0.5);

        buttonOnClick(this.playBtn, () => {
            this.videoplayer.play();
            if (this.playAudioId!=null) {
                cc.audioEngine.resume(this.playAudioId);
            }
        });

        const mask = cc.find(`Canvas/videoContainer/mask`);
        mask.on('click', () => {
            if (this.videoplayer.isPlaying()) {
                this.videoplayer.pause();
                if (this.playAudioId!=null) {
                    cc.audioEngine.pause(this.playAudioId);
                }
                this.playBtn.active = true;
            }
        });

        this.videoplayer.node.on('ready-to-play', () => {
            this.videoplayer.play();
		});
        this.videoplayer.node.on('playing', (evt) => {
            this.playBtn.active = false;
        });
        this.videoplayer.node.on('completed', (evt) => {
            this.closeVideo();
        });
    }


    prePlayIndex = 0;
    playAudioId = null;
    listenTimePlayRecorder() {
        const item = this.rowData.item_arr[this.prePlayIndex];
        if(!item) {
            return;
        }
        const startTime = item.startTime;
        const audio_url = item.audio_url;
        if (this.videoplayer.currentTime>=startTime) {
            this.prePlayIndex++;
            cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
                if (err) {
                    console.error(err);
                    return;
                }
                if (this.videoplayer.isPlaying()) {
                    this.playAudioId = cc.audioEngine.play(audioClip, false, 1);
                }
            });
            
        }
    }
    
    update (dt) {
        this.updateVideoStrip();
        this.listenTimePlayRecorder();
    }

    showTips(tips) {
		const middleLayer = cc.find('middleLayer')?.getComponent('middleLayer');
		if (middleLayer) {
			middleLayer.showTips(tips);
		} else {
			console.log(tips);
		}
	}
}
