import * as THREE from 'three';
const {
  document,
	window,
	HTMLCanvasElement,
	requestAnimationFrame,
	cancelAnimationFrame,
core,
	Event,
  Event0
} = THREE .DHTML

import Stats from 'three/examples/jsm/libs/stats.module.js';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { OrbitControls0 } from 'three/examples/jsm/controls/OrbitControls0.js';
import { HDRCubeTextureLoader } from 'three/examples/jsm/loaders/HDRCubeTextureLoader.js';

import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture.js';

var requestId
Page({
	onUnload() {
		cancelAnimationFrame(requestId, this.canvas)
		this.worker && this.worker.terminate()
if(this.canvas) this.canvas = null
		setTimeout(() => {
			if (this.renderer instanceof THREE.WebGLRenderer) {
				this.renderer.dispose()
				this.renderer.forceContextLoss()
				this.renderer.context = null
				this.renderer.domElement = null
				this.renderer = null
			}
		}, 10)
	},
  webgl_touch(e){
		const web_e = (window.platform=="devtools"?Event:Event0).fix(e)
		this.canvas.dispatchEvent(web_e)
  },
  onLoad() {
		document.createElementAsync("canvas", "webgl2",this).then(canvas => {
      this.canvas = canvas
      this.body_load(canvas).then()
    })
  },
  async body_load(canvas3d) {	
  let container, stats;

  let camera, scene, renderer;

  let particleLight;
  let group;

  init();
  animate();

  function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 0.25, 50 );
    camera.position.z = 10;

    scene = new THREE.Scene();

    group = new THREE.Group();
    scene.add( group );

    new HDRCubeTextureLoader()
      .setPath( 'textures/cube/pisaHDR/' )
      .load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
       async function ( texture ) {

          const geometry = new THREE.SphereGeometry( .8, 64, 32 );

          const textureLoader = new THREE.TextureLoader();

          const diffuse = textureLoader.load( 'textures/carbon/Carbon.png' );
          diffuse.colorSpace = THREE.SRGBColorSpace;
          diffuse.wrapS = THREE.RepeatWrapping;
          diffuse.wrapT = THREE.RepeatWrapping;
          diffuse.repeat.x = 10;
          diffuse.repeat.y = 10;

          const normalMap = textureLoader.load( 'textures/carbon/Carbon_Normal.png' );
          normalMap.wrapS = THREE.RepeatWrapping;
          normalMap.wrapT = THREE.RepeatWrapping;
          normalMap.repeat.x = 10;
          normalMap.repeat.y = 10;

          const normalMap2 = textureLoader.load( 'textures/water/Water_1_M_Normal.jpg' );

          const normalMap3 = new THREE.CanvasTexture(await core.Canvas.fix(canvas3d,new FlakesTexture() ));
          normalMap3.wrapS = THREE.RepeatWrapping;
          normalMap3.wrapT = THREE.RepeatWrapping;
          normalMap3.repeat.x = 10;
          normalMap3.repeat.y = 6;
          normalMap3.anisotropy = 16;

          const normalMap4 = textureLoader.load( 'textures/golfball.jpg' );

          const clearcoatNormalMap = textureLoader.load( 'textures/pbr/Scratched_gold/Scratched_gold_01_1K_Normal.png' );

          // car paint

          let material = new THREE.MeshPhysicalMaterial( {
            clearcoat: 1.0,
            clearcoatRoughness: 0.1,
            metalness: 0.9,
            roughness: 0.5,
            color: 0x0000ff,
            normalMap: normalMap3,
            normalScale: new THREE.Vector2( 0.15, 0.15 )
          } );

          let mesh = new THREE.Mesh( geometry, material );
          mesh.position.x = - 1;
          mesh.position.y = 1;
          group.add( mesh );

          // fibers

          material = new THREE.MeshPhysicalMaterial( {
            roughness: 0.5,
            clearcoat: 1.0,
            clearcoatRoughness: 0.1,
            map: diffuse,
            normalMap: normalMap
          } );
          mesh = new THREE.Mesh( geometry, material );
          mesh.position.x = 1;
          mesh.position.y = 1;
          group.add( mesh );

          // golf

          material = new THREE.MeshPhysicalMaterial( {
            metalness: 0.0,
            roughness: 0.1,
            clearcoat: 1.0,
            normalMap: normalMap4,
            clearcoatNormalMap: clearcoatNormalMap,

            // y scale is negated to compensate for normal map handedness.
            clearcoatNormalScale: new THREE.Vector2( 2.0, - 2.0 )
          } );
          mesh = new THREE.Mesh( geometry, material );
          mesh.position.x = - 1;
          mesh.position.y = - 1;
          group.add( mesh );

          // clearcoat + normalmap

          material = new THREE.MeshPhysicalMaterial( {
            clearcoat: 1.0,
            metalness: 1.0,
            color: 0xff0000,
            normalMap: normalMap2,
            normalScale: new THREE.Vector2( 0.15, 0.15 ),
            clearcoatNormalMap: clearcoatNormalMap,

            // y scale is negated to compensate for normal map handedness.
            clearcoatNormalScale: new THREE.Vector2( 2.0, - 2.0 )
          } );
          mesh = new THREE.Mesh( geometry, material );
          mesh.position.x = 1;
          mesh.position.y = - 1;
          group.add( mesh );

          //

          scene.background = texture;
          scene.environment = texture;

        }

      );

    // LIGHTS

    particleLight = new THREE.Mesh(
      new THREE.SphereGeometry( .05, 8, 8 ),
      new THREE.MeshBasicMaterial( { color: 0xffffff } )
    );
    scene.add( particleLight );

    particleLight.add( new THREE.PointLight( 0xffffff, 30 ) );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    //

    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.25;

    //


    //

    stats = new Stats();
    container.appendChild( stats.dom );

    // EVENTS

    const controls = new (window.platform=="devtools"?OrbitControls:OrbitControls0)( camera, renderer.domElement );
    controls.minDistance = 3;
    controls.maxDistance = 30;

    window.addEventListener( 'resize', onWindowResize );

  }

  //

  function onWindowResize() {

    const width = window.innerWidth;
    const height = window.innerHeight;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    renderer.setSize( width, height );

  }

  //

  function animate() {

    requestId = requestAnimationFrame( animate );

    render();

    stats.update();

  }

  function render() {

    const timer = Date.now() * 0.00025;

    particleLight.position.x = Math.sin( timer * 7 ) * 3;
    particleLight.position.y = Math.cos( timer * 5 ) * 4;
    particleLight.position.z = Math.cos( timer * 3 ) * 3;

    for ( let i = 0; i < group.children.length; i ++ ) {

      const child = group.children[ i ];
      child.rotation.y += 0.005;

    }

    renderer.render( scene, camera );

  }
  }
})