import * as THREE from "/node_modules/three/build/three.module.js";
import { OrbitControls } from '/node_modules/three/examples/jsm/controls/OrbitControls.js';
import { RGBELoader } from '/node_modules/three/examples/jsm/loaders/RGBELoader.js';
import * as dat from './dat.gui.module.js';

window.addEventListener("load", init);

let scene;
let camera;
let controls;
let renderer;
let pmremGenerator;
let hdrCubeRenderTarget;

let mesh;

function init() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 0.8;
    renderer.outputEncoding = THREE.sRGBEncoding;

    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );

    controls = new OrbitControls( camera, renderer.domElement );
    controls.enableDamping = true;
    controls.dampingFactor = 0.0875;

    camera.position.set( 0, 0, 60 );
    controls.target.set( 0, 0, 0 );
    controls.update();

    pmremGenerator = new THREE.PMREMGenerator( renderer );
    pmremGenerator.compileEquirectangularShader();

    new RGBELoader()
    .setDataType( THREE.UnsignedByteType ) // alt: FloatType, HalfFloatType
    .load( "envmaps/env.hdr", function ( texture, textureData ) {

        hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( texture );

        onDownload();
    });


    function onDownload() {

        mesh = new THREE.Mesh(
            new THREE.SphereBufferGeometry(10, 100, 100),

            new THREE.MeshPhysicalMaterial({
                color: 0xffffff,
                reflectivity: 0.5,
                clearcoat: 0,
                clearcoatRoughness: 0,
                envMap: hdrCubeRenderTarget.texture,
                envMapIntensity: 0.625,
                metalness: 0,
                roughness: 0,
                opacity: 1,
                side: THREE.DoubleSide,
            })
        );

        scene.background = new THREE.Color(0xffffff); //hdrCubeRenderTarget.texture; //new THREE.Color(0xffffff);
        scene.add(mesh);
    }


    initGUI();
    animate();
}

function animate(now) {
    requestAnimationFrame( animate );

    controls.update();

    renderer.render( scene, camera );
}


function initGUI() {
    var FizzyText = function() {
        this.reflectivity = 0.5;
        this.roughness = 0;
        this.metalness = 0;
        this.clearcoat = 0;
        this.clearcoatRoughness = 0;
        this.envMapIntensity = 0.625;
    };


    var text = new FizzyText();
    var gui = new dat.GUI();
    gui.add(text, 'roughness', 0, 1).onChange(function(value) {
        mesh.material.roughness = value;
    });
    gui.add(text, 'metalness', 0, 1).onChange(function(value) {
        mesh.material.metalness = value;
    });
    gui.add(text, 'reflectivity', 0, 1).onChange(function(value) {
        mesh.material.reflectivity = value;
    });
    gui.add(text, 'clearcoat', 0, 1).onChange(function(value) {
        mesh.material.clearcoat = value;
    });
    gui.add(text, 'clearcoatRoughness', 0, 1).onChange(function(value) {
        mesh.material.clearcoatRoughness = value;
    });
    gui.add(text, 'envMapIntensity', 0, 5).onChange(function(value) {
        mesh.material.envMapIntensity = value;
    });
}