import * as THREE from "three";


import { OrbitControls } from "three/examples/controls/OrbitControls.js";

import { USDZExporter } from 'three/examples/exporters/USDZExporter.js';

import { GLTFLoader } from 'three/examples/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/examples/loaders/RGBELoader.js';
class App {

constructor() {
	this.initThree();
	// this.bindBakeButton();
	setTimeout(()=>{
		this.initHDR2();
	}, 500);
}

initThree() {
	this.renderer = new THREE.WebGLRenderer({antialias:true});
	this.renderer.setPixelRatio(devicePixelRatio);

	document.body.appendChild(this.renderer.domElement);
	this.scene = new THREE.Scene();
	this.meshHolder = new THREE.Object3D();
	this.scene.add(this.meshHolder);
	Object.assign(this.renderer.domElement.style, {
		position:'fixed',
		top:0,
		left:0
	});
	this.renderer.domElement.style.display = "inline-block";
	this.renderer.setSize(innerWidth,innerHeight);
	Object.assign(this.renderer.domElement.style, {
		position:'fixed',
		top:0,
		left:0
	});
	this.camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 100);
	this.camera.position.z =-4;
	this.camera.position.y =-0.4;
	this.camera.lookAt(new THREE.Vector3());
	this.controls = new OrbitControls(this.camera, this.renderer.domElement);
	this.controls.autoRotate = true;
	this.controls.autoRotateSpeed = 1;
	this.controls.target.y = -1;
	this.renderer.setClearColor(0x808080);

   this.buildBook();


	this.addShadowLight();
this.addStool();
  
	this.renderer.setAnimationLoop(e=>this.update(e));
}

smoothstep(canvas) {
	var g = canvas.getContext('2d');
	const src = g.getImageData(0,0, canvas.width, canvas.height);
	for(var i=0;i< src.data.length;i+=4) {
		var f = src.data[i]/255;
		src.data[i] = f*f*(3-2*f) *255;
	}
	g.putImageData(src, 0,0);
	return canvas;
}

bumpToNormal(canvas,offset=1, intensity = 2) {
	// canvas = this.smoothstep(canvas);
	 var g = canvas.getContext('2d');
	const src = g.getImageData(0,0, canvas.width, canvas.height);
	const dest = g.getImageData(0,0, canvas.width, canvas.height);

	for(var i=0;i< src.data.length;i+=4) {

		//TODO this doens't resolve over the width boundary!
		var red = (src.data[i+0]-src.data[i+4*offset])*intensity;
		var green = (src.data[i+0]-src.data[i+4*offset*canvas.width])*intensity;
		var blue = 255-Math.abs(red)-Math.abs(green);

		dest.data[i+0] = 128+red;
		dest.data[i+1] = 128+green;
		dest.data[i+2] = blue;
		dest.data[i+3] = 255;
	}

	g.putImageData(dest, 0,0);
	return canvas;
}

async buildDomTextures(el, angle =0) {
	el.classList.add('null')
	var albedo = await html2canvas(el);
	var albedo = await html2canvas(el);

	el.classList.add('orm');
	var ormCanvas = await html2canvas(el);
	const orm = new THREE.CanvasTexture(ormCanvas);


	el.classList.replace('orm', 'bump');
	var normal = new THREE.CanvasTexture(this.bumpToNormal(await html2canvas(el)));
	el.parentElement.removeChild(el);
	var map = new THREE.CanvasTexture(albedo);
	map.rotation = orm.rotation = normal.rotation = angle;
	map.wrapS = map.wrapT = orm.wrapS = orm.wrapT = normal.wrapS = normal.wrapT = THREE.RepeatWrapping;
	return {map, orm, normal};
}

async buildBook() {
	const frontCover = await this.buildDomTextures(document.querySelector('.cover'));
	const spine = await this.buildDomTextures(document.querySelector('.cover-side'), -Math.PI/2);

	var frontMaterial = 	new THREE.MeshStandardMaterial({
		transparent:true,
		map:frontCover.map,
		side:THREE.DoubleSide,
		normalMap:frontCover.normal,
		metalness:1,
		roughness:1,
		metalnessMap:frontCover.orm,
		roughnessMap:frontCover.orm
	});

	var spineMaterial = 	new THREE.MeshStandardMaterial({
		transparent:true,
		map:spine.map,
		side:THREE.DoubleSide,
		normalMap:spine.normal,
		metalness:1,
		roughness:1,
		metalnessMap:spine.orm,
		roughnessMap:spine.orm
	});

  
	var pages = new THREE.MeshStandardMaterial({map:this.pages(0)});
	var pagesSide = new THREE.MeshStandardMaterial({map:this.pages(Math.PI/2)});
	var orange = new THREE.MeshStandardMaterial({color:0xf3a903})

	const book = new THREE.Mesh(new THREE.BoxGeometry(1,1.5,0.3),[ spineMaterial,pagesSide,pages,pages,orange,frontMaterial]);
	book.rotation.x = 0.2;
  book.position.y = 0.01;
	book.castShadow = book.receiveShadow = true;

	this.meshHolder.add(book);
	


}
  addShadowLight() {
    var light = new THREE.DirectionalLight(0xc0e0ff,12.5);
	light.position.y = 1;
	light.position.z = -0.4;
	light.castShadow = true;


    
	light.castShadow = true;
	light.shadow.mapSize.width = 1024;
	light.shadow.mapSize.height = 1024;
	light.shadow.bias = 0.0000001;
	light.shadow.normalBias = 0.01;
	light.shadow.camera.left = -1.5;
	light.shadow.camera.right = 1.5;
	light.shadow.camera.top = 1.5;
	light.shadow.camera.bottom = -1.5;

	light.shadow.camera.far = 4.5;
	this.scene.add(light);
  }
  addStool() {
    var loader = new GLTFLoader();

	var assetPath = "https://dl.polyhaven.org/file/ph-assets/Models/";
   loader.load(assetPath+"gltf/1k/wooden_stool_01/wooden_stool_01_1k.gltf", result=>{
	var stool = result.scene.children[0];
	// debugger;
	stool.castShadow = stool.receiveShadow = true;
	var tl = new THREE.TextureLoader();
	stool.material.roughness =1;
	stool.material.roughnessMap = tl.load(assetPath+"jpg/1k/wooden_stool_01/wooden_stool_01_rough_1k.jpg",t=>t.flipY = false);
	stool.material.normalMap = tl.load(assetPath+"jpg/1k/wooden_stool_01/wooden_stool_01_nor_gl_1k.jpg",t=>t.flipY = false)
	stool.material.map = tl.load(assetPath+"jpg/1k/wooden_stool_01/wooden_stool_01_diff_1k.jpg", t=>t.flipY = false)
	stool.scale.multiplyScalar(6);
	stool.position.y = -3.3;
	// debugger;
	this.meshHolder.add(stool);
   });
  }
pages(angle) {
	var c = document.createElement("canvas");
	c.width = c.height = 1024;
	var g = c.getContext('2d');
	g.fillStyle="white";
	g.fillRect(0,0,1024,1024);
	g.fillStyle = "gray";
	for(var i=0;i<100;i++) {
		g.fillRect(0,i/100*1024,1024,4);

	}
	const t = new THREE.CanvasTexture(c);
	t.wrapS = t.wrapT = THREE.RepeatWrapping;
	t.rotation = angle;
	return t;
}

initHDR2() {
	this.renderer.physicallyCorrectLights = true;
	  this.renderer.toneMapping = THREE.LinearToneMapping;
	  this.renderer.outputEncoding = THREE.sRGBEncoding;
	  this.renderer.toneMappingExposure  = 0.25;
	  this.renderer.shadowMap.enabled = true;
	  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;;
	new RGBELoader()
				  .setDataType( THREE.HalfFloatType )
				  .setPath( 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/' )
				  .load( 'monbachtal_riverbank_2k.hdr', texture=> {
				//   .load( 'studio_country_hall_2k.hdr', texture=> {
				//   .load( 'b515_IBL.hdr', texture=> {
		  const pmremGenerator = new THREE.PMREMGenerator( this.renderer );
				  pmremGenerator.compileEquirectangularShader();
					  const envMap = pmremGenerator.fromEquirectangular( texture ).texture;

					  this.scene.background = envMap;
					  this.scene.environment = envMap;
		  this.worldEnvMap  = envMap;
					  texture.dispose();
					  pmremGenerator.dispose();
				  });
  }



bindBakeButton() {
	const button = document.querySelector('.bake');
	button.addEventListener('click',e =>{
		const exporter = new USDZExporter();
		exporter.parse(this.scene).then(data=>{

			const blob = new Blob( [ data ], { type: 'application/octet-stream' });
			const url = URL.createObjectURL(blob);
			const model = document.createElement('model');
			const source = document.createElement('source');
			source.setAttribute('src', url);
			model.appendChild(source);
			document.body.appendChild(model);

			// this.makeSculpture();
		});


	});

}


update(e) {
	this.controls.update();
	this.meshHolder.rotation.y-=0.003;
	this.meshHolder.position.y = -0.35;
	this.renderer.render(this.scene, this.camera);

}

}



const app = window.app = new App();