import * as THREE from "three";
import * as fgui from "../../build/FairyGUI";
import {Stage} from "../../src/core/Stage";
import {PerspectiveCamera} from "three";

export class Threescene {
    private scene: THREE.Scene
    private renderer: THREE.WebGLRenderer;
    private uiscene: THREE.Scene;
    private defaultCamera: THREE.PerspectiveCamera;

    private _mainMenu: fgui.GComponent;

    constructor() {
        this.init();
    }

    private init() {
        this.renderer = new THREE.WebGLRenderer();//{ antialias: true }
        this.renderer.setClearColor(0X222200);
        this.renderer.sortObjects = false;
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.localClippingEnabled = true;
        document.body.appendChild(this.renderer.domElement);


        this.scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry( 30, 30, 10);
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        cube.position.set(-8, 8, 8);
        this.scene.add( cube );
        this.defaultCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 5000);
        this.defaultCamera.position.set(0, 0, 50);

        let dirLight = new THREE.DirectionalLight(0xffffff, 1);
        dirLight.position.set(-8, 8, 8);
        dirLight.castShadow = true;
        //dirLight.shadow.bias = 0.000004;
        this.scene.add(dirLight);

        //{ screenMode: "horizontal" }
        this.uiscene = new THREE.Scene();
        fgui.Stage.init(this.renderer,{ screenMode: "horizontal"});
        fgui.Stage.scene = this.uiscene;
        fgui.Stage.forceResize();

        window.addEventListener('resize', (resizeEvent) => {

            this.renderer.setSize(window.innerWidth, window.innerHeight);
            //console.log("this.canvas.style" + this.renderer.domElement.style.transform);

            let aspect = window.innerWidth / window.innerHeight;
            let _width = window.innerWidth;
            let _height = window.innerHeight;

            if(window.innerWidth < window.innerHeight)
                aspect = 1 / aspect;
            this.defaultCamera.aspect = aspect;
            this.defaultCamera.updateProjectionMatrix();

            fgui.Stage.forceResize(resizeEvent);
            fgui.GRoot.inst.refreshPosition();


        }, false);

        fgui.UIContentScaler.scaleWithScreenSize(1920, 1080, fgui.ScreenMatchMode.MatchWidthOrHeight);
        //fgui.UIContentScaler.scaleWithScreenSize(screen.width, screen.height, fgui.ScreenMatchMode.MatchWidth);

        // let listener: THREE.AudioListener = new THREE.AudioListener();
        // fgui.Stage.camera.add(listener);
        // fgui.Stage.audioListener = listener;

        fgui.UIPackage.setPath("http://mixoss-test.hashvr.cn/staging/");
        fgui.UIPackage.loadPackage("assets/UI/Chat").then(this.start.bind(this));

        this.animate();
    }

    private start() {
        console.log("input text start");
        this._mainMenu = fgui.UIPackage.createObject("Chat", "Main").asCom;
        this._mainMenu.displayObject.name = "mainmenu";
        this._mainMenu.makeFullScreen();
        fgui.GRoot.inst.addChild(this._mainMenu);
        console.log("start");
    }

    private render() {

        this.renderer.render(this.scene, this.defaultCamera);
        fgui.Stage.update();
        let oldClear = this.renderer.autoClear;
        this.renderer.autoClear = false;
        this.renderer.render(this.uiscene, fgui.Stage.camera);
        this.renderer.autoClear = oldClear;

    }

    private animate = () => {
        requestAnimationFrame(this.animate)
        this.render()
    }
}

new Threescene();