import { OrbitControls } from 'jsm/controls/OrbitControls.js';


import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'jsm/renderers/CSS3DRenderer.js';
import css3dlabel from './units/css3dlabel.js'

var APP = {

	Player: function () {


		var controls, camera, glScene, cssScene, glRenderer, cssRenderer;

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

		camera.position.set(-10, 5, -10);

		glRenderer = createGlRenderer();
		cssRenderer = createCssRenderer();

		controls = new OrbitControls(camera, glRenderer.domElement);
		// controls = new OrbitControls(camera, glRenderer.domElement);
		document.body.appendChild(cssRenderer.domElement);
		document.body.appendChild(glRenderer.domElement);
		// glRenderer.domElement.appendChild(cssRenderer.domElement);

		glScene = new THREE.Scene();
		cssScene = new THREE.Scene();


		// for (var i = 0; i < 20; i++) {
		// 	create3dPage(
		// 		1020, 680,
		// 		new THREE.Vector3(-2 - i, 1 + i / 3, -4.2 + i),
		// 		new THREE.Vector3(0, Math.PI, 0),
		// 		'https://zuoben.blog.csdn.net/');
		// }

		// initModel();
		createLights();

		window.camera = camera;
		window.scene = glScene;

		var waters = [];



		function createGlRenderer() {
			var glRenderer = new THREE.WebGLRenderer({
				antialias: true,
				alpha: true
			});

			glRenderer.setClearColor(0x34495E);
			glRenderer.setPixelRatio(window.devicePixelRatio);
			glRenderer.setSize(window.innerWidth, window.innerHeight);

			glRenderer.domElement.style.position = 'absolute';
			glRenderer.domElement.style.zIndex = 1;
			glRenderer.domElement.style.top = 0;

			return glRenderer;
		}

		function createCssRenderer() {
			var cssRenderer = new CSS3DRenderer();
			cssRenderer.setSize(window.innerWidth, window.innerHeight);
			cssRenderer.domElement.style.position = 'absolute';
			glRenderer.domElement.style.zIndex = 0;
			cssRenderer.domElement.style.top = 0;
			return cssRenderer;
		}

		function initDraws(child) { }

		function initFrames(child) {
			child.material = new THREE.MeshBasicMaterial({
				color: 0x7f5816,
			})
		}

		function initStairs(child) {
			child.material = new THREE.MeshStandardMaterial({
				color: 0xd1cdb7,
			})
			child.material.roughness = 0.5
			child.material.metalness = 0.6
		}

		function initWalls(child) {
			child.material = new THREE.MeshStandardMaterial({
				color: 0xffffff,
			})
			child.material.roughness = 0.5
			child.material.metalness = 0.6
		}

		function create3dPage(w, h, position, rotation, url) {
			var plane = createPlane(
				w, h,
				position,
				rotation);
			glScene.add(plane);

			var cssObject = createCssObject(
				w, h,
				position,
				rotation,
				url);
			cssScene.add(cssObject);
		}

		function createLights() {
			var directionalLight = new THREE.DirectionalLight(0xafafaf);
			directionalLight.position.set(-.5, .5, -1.5).normalize();
			glScene.add(directionalLight);

			const light = new THREE.AmbientLight("#ffffff");
			glScene.add(light);

			const light1 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			light1.position.set(-2, 3, 2)
			glScene.add(light1)

			const light2 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			light2.position.set(0, 3, -6)
			glScene.add(light2)

			const light3 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			light3.position.set(-12, 3, 6)
			glScene.add(light3)

			const light4 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			light4.position.set(-12, 4, -4)
			glScene.add(light4)

			const light5 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			light5.position.set(12, 4, -8)
			glScene.add(light5)

			const light6 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			light6.position.set(12, 4, 0)
			glScene.add(light6)

			const light7 = new THREE.PointLight(0xe0ffff, 0.1, 20)
			light7.position.set(12, 4, 8)
			glScene.add(light7)
		}

		this.setClearColor = function (color) {
			glRenderer.setClearColor(color);
		}
		//position = { x: 0, y: 0, z: 0 }, rotation= { x: 0, y: 0, z: 0 } 
		this.addModels = function (value) {

			glScene.add(value);

		};


		this.setCamera = function (value) {

			camera = value;
			camera.aspect = this.width / this.height;
			camera.updateProjectionMatrix();
			// this.camera = camera;
			window.camera = camera;

		};

		this.setScene = function (value) {

			glScene = value;
			window.scene = glScene

		};
		this.addWater = function (water) {
			waters.push(water);
		}
		this.setPixelRatio = function (pixelRatio) {

			glRenderer.setPixelRatio(pixelRatio);

		};

		this.setSize = function (width, height) {

			this.width = width;
			this.height = height;

			if (camera) {

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

			}

			glRenderer.setSize(this.width, this.height);
			cssRenderer.setSize(this.width, this.height);

		};



		var time, startTime, prevTime;



		function animate() {


			// controls.update();

			glRenderer.render(glScene, camera);

			cssRenderer.render(cssScene, camera);
			// waters.forEach(water => {
			// 	// 播放特效
			// 	water.material.uniforms['time'].value += 1.0 / 60.0;
			// });


		}

		var objects = []
		this.play = function () {


			// if (renderer.xr.enabled) dom.append(vrButton);

			// startTime = prevTime = performance.now();

			// document.addEventListener('keydown', onKeyDown);
			// document.addEventListener('keyup', onKeyUp);
			// document.addEventListener('pointerdown', onPointerDown);
			// document.addEventListener('pointerup', onPointerUp);
			// document.addEventListener('pointermove', onPointerMove);

			// dispatch(events.start, arguments);

			glRenderer.setAnimationLoop(animate);

			const image = document.createElement('img');
			image.addEventListener('load', function () {

				for (let i = 0; i < 2; i++) {

					const object = new CSS3DSprite(image.cloneNode());
					object.position.x = Math.random() * 4 - 2,
						object.position.y = Math.random() * 4 - 2,
						object.position.z = Math.random() * 4 - 2;
					object.scale.set(0.01, 0.01, 0.01);
					glScene.add(object);

					objects.push(object);

				}

				//transition();

			});
			image.src = '/assets/textures/sprite.png';

			cssScene.add(createSpriteShape());
			cssScene.add(createBox13DLabel());


		};

		this.stop = function () {

			if (renderer.xr.enabled) vrButton.remove();

			// document.removeEventListener('keydown', onKeyDown);
			// document.removeEventListener('keyup', onKeyUp);
			// document.removeEventListener('pointerdown', onPointerDown);
			// document.removeEventListener('pointerup', onPointerUp);
			// document.removeEventListener('pointermove', onPointerMove);

			dispatch(events.stop, arguments);

			glRenderer.setAnimationLoop(null);


		};


		this.dispose = function () {

			glRenderer.dispose();
			cssRenderer.dispose();

			camera = undefined;
			glScene = undefined;
			cssScene = undefined;

		};

		//
		this.create3dPage = function (w, h, position, rotation, url) {

			var plane = css3dlabel.createPlane(
				w, h,
				position,
				rotation);
			glScene.add(plane);

			var cssObject = css3dlabel.createCssObject(
				w, h,
				position,
				rotation,
				url);
			cssScene.add(cssObject);
		}
		const defaultScale=80
		this.create3dLabel = function (parent, text, w = 100, h = 20, position, rotation) {
			 
            let txtlength=text.length
          
			var width = defaultScale * txtlength;
			var height = defaultScale + 15;
			 
			var plane = css3dlabel.createPlane(
				width, height,
				position,
				rotation);
			 
			glScene.add(plane);

			var cssObject = css3dlabel.createCssLabel(text,
				width, height,
				position,
				rotation);
			// if(parent){
			// 	parent.add(cssObject);

			// }else{ 
			cssScene.add(cssObject);
			// } 
		}
		// this.create3dButton = function (parent, text, w = 100, h = 20, position, rotation,click) {

		// 	let txtlength = text.length

		// 	var width = defaultScale * txtlength;
		// 	var height = defaultScale + 15;

		// 	var plane = css3dlabel.createPlane(
		// 		width, height,
		// 		position,
		// 		rotation);

		// 	glScene.add(plane);

		// 	var cssObject = css3dlabel.createButton(text, 
		// 		position,
		// 		rotation,click);
		// 	// if(parent){
		// 	// 	parent.add(cssObject);

		// 	// }else{ 
		// 	cssScene.add(cssObject);
		// 	// } 
		// }
		function createSpriteShape() {
			/*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/
			let canvas = document.createElement("canvas");
			canvas.width = 120;
			canvas.height = 120;
			/*2、创建图形，这部分可以去看w3c canvas教程*/
			let ctx = canvas.getContext("2d");
			ctx.fillStyle = "#ff0000";
			ctx.arc(50, 50, 50, 0, 2 * Math.PI);
			ctx.fill();
			/*3、将canvas作为纹理，创建Sprite*/
			let texture = new THREE.Texture(canvas);
			texture.needsUpdate = true; //注意这句不能少
			let material = new THREE.SpriteMaterial({
				color: 0xff00ff,//设置精灵矩形区域颜色
				rotation: Math.PI / 4,//旋转精灵对象45度，弧度值
				map: texture,//设置精灵纹理贴图
			});
			let mesh = new THREE.Sprite(material);
			mesh.position.x = 2;
			mesh.position.y = 2;
			/*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
			//mesh.scale.set(100,100,1);
			return mesh;
		}
		function createBox13DLabel() {
			const div = document.createElement("div");
			div.className = "red-box-label";
			div.textContent = "红色正方体";
			// CSS3DSprite;CSS3DObject
			const earthLabel = new CSS3DSprite(div);
			earthLabel.position.set(1, 0.2, 0.5);
			earthLabel.scale.set(0.01, 0.01, 0.01);
			return earthLabel;
		}

	}

};

export { APP };