import { 
    PlaneGeometry, MeshBasicMaterial, SRGBColorSpace, 
    VideoTexture, DoubleSide, Mesh
} from 'three';

import { EventManager } from '@/lib/EventManager';
class VideoPlayer extends EventManager {
    emits = ['finish', 'interaction']
    constructor(engine, data){
        super();
        let vi, plane, finished = false;
        return new Promise((resolve, reject)=>{
            vi = document.createElement('video');
            vi.addEventListener('loadedmetadata', async ()=>{
                this.aspect = vi.videoWidth / vi.videoHeight;
                if (isNaN(this.aspect)) this.aspect = 16/9;
                let geometry = new PlaneGeometry( this.aspect * 0.88, 0.88 );
                let map = new VideoTexture( vi );
                map.colorSpace = SRGBColorSpace;
                let material = new MeshBasicMaterial( {
                    color: 0xffffff,
                    map,
                    transparent: true,
                    opacity: 0.5,
                    side: DoubleSide
                } );
                plane = new Mesh( geometry, material );
                this.object = plane;
                engine.clickable.add(plane, ()=>{
                    if (vi.paused){
                        vi.play();
                    }else{
                        vi.pause();
                        engine.tm?.post('paused', null, {time: vi.currentTime});
                    }
                    this.dispatchEvent({type:'interaction'})
                });

                const onPlay = ()=>{
                    material.opacity = 1;
                    if (data.playInHud && engine.dashboard?.active){
                        engine.dashboard.attach(plane, {
                            skipTransition: data.skipTransition
                        });
                        plane.renderOrder = 1000;
                        material.depthTest = false;
                        material.needsUpdate = true;
                    }
                    if (data.immersive || 1){
                        engine.immersive(true);
                    }
                    if (data.description) {
                        engine.dashboard.updateText(data.description, {
                            hideOnFinish: true,
                            startFrom: vi.currentTime / vi.duration,
                            duration: vi.duration
                        })
                    }
                }

                const onPause = ()=>{
                    if (data.playInHud){
                        engine.dashboard?.detach(plane, {
                            skipTransition: data.skipTransition
                        });
                        plane.renderOrder = 0;
                        material.depthTest = true;
                        material.needsUpdate = true;
                    }
                    if (data.immersive || 1){
                        engine.immersive(false);
                    }
                    if (data.description) {
                        engine.dashboard.updateText('')
                    }
                }

                vi.addEventListener('play', onPlay);
                vi.addEventListener('pause', onPause);
                
                vi.addEventListener('ended', ()=>{
                    finished = true;
                    this.dispatchEvent({type:'finish'})
                })
                this.video = vi;

                this.play = function(){
                    try {
                        vi.play();
                    }catch(err){
                        //TODO: show play button!!!
                    }
                }
                
                resolve(this);
            }, { once: true })
            vi.src = engine.assetPath + data.$go.asset.name;
        })
    }
}

export { VideoPlayer }