import * as THREE from './three.module.js';
import { OrbitControls } from './OrbitControls.module.js';

export class Threetobus{

    constructor(canvasEl){
        this.canvasEl = canvasEl
    }

    init(){
        // Scene
            this.scene = new THREE.Scene()
            //scene.background = new THREE.Color(0x202080)
        
            // Camera
            this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
            this.camera.position.set(3, 3, 5)

            // Renderer
            this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })

            //renderer.setSize(window.innerWidth, window.innerHeight)

            // Cube
            const geometry = new THREE.BoxGeometry()
            const material = new THREE.MeshStandardMaterial({ color: 'red' })
            this.cube = new THREE.Mesh(geometry, material)
            this.scene.add(this.cube)
            this.cube.position.x+=2


            // Light
            const light = new THREE.DirectionalLight(0xffffff, 1)
            light.position.set(5, 5, 5)
            light.intensity = 2
            this.scene.add(light)
            this.scene.add(new THREE.AmbientLight(0xffffff, 0.4))

            this.controls = new OrbitControls(this.camera, this.renderer.domElement)
            this.renderer.render(this.scene, this.camera)

            window.addEventListener('resize', () => {
                this.camera.aspect = window.innerWidth / window.innerHeight
                this.camera.updateProjectionMatrix()
                renderer.setSize(window.innerWidth, window.innerHeight)
            })
            this.animate()

            this._render()

        }

        _resizeRendererToDisplaySize() {
            const canvas = this.renderer.domElement
            const width = canvas.clientWidth
            const height = canvas.clientHeight
            if (canvas.width !== width || canvas.height !== height) {
                this.renderer.setSize(width, height, false)
                return true
            }
            return false
        }

        _render() {
            if (this._resizeRendererToDisplaySize()) {
                this.camera.aspect = this.renderer.domElement.clientWidth / this.renderer.domElement.clientHeight
                this.camera.updateProjectionMatrix()
            }
            this.renderer.render(this.scene, this.camera)
            requestAnimationFrame(this._render.bind(this))
        }


        animate() {
            requestAnimationFrame(this.animate.bind(this))
            this.cube.rotation.x += 0.01
            this.cube.rotation.y += 0.01
            this.controls.update()
            this.renderer.render(this.scene, this.camera)
        }
                        
}


// Make this module available to common JS
if(!app.LoadedModules) app.LoadedModules = {}
app.LoadedModules.Threetobus = Threetobus