let scene, camera, renderer, width, height, radiusOfBoundCylinder = 0.1, controls;


// изменение размеров окна сцены при изменении размеров окна браузера
const resizeScene = () => {
	width = window.innerWidth * 0.8;
	height = window.innerHeight * 0.7;
	renderer.setViewport(0, 0, width, height);
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
}


const initThreeJS = () => {
	// создание сцены, ее настройка
	scene = new THREE.Scene();
	width = window.innerWidth * 0.8;
	height = window.innerHeight * 0.7;
	camera = new THREE.PerspectiveCamera(90, width / height, 0.001, 25);
	renderer = new THREE.WebGLRenderer({canvas: glcanvas});
	renderer.setSize(width, height);
	renderer.render(scene, camera);

	// задаем функцию отслеживания изменений размера
	window.onresize = resizeScene;

	// управление камерой
	// w - вперед, s - назад
	// a - влево, d - вправо
	// q - вниз, e - вверх
	document.addEventListener('keydown', function(e) {
		let key = e.keyCode || e.which;
		console.log(camera.position);
		switch (key) {
			// w
			case 87:
				camera.position.z += 0.05;
			// s
			case 83:
				camera.position.z -= 0.05;
			// a
			case 65:
				camera.position.x += 0.05;
			// d
			case 68:
				camera.position.x -= 0.05;
			// q
			case 81:
				camera.position.y += 0.05;
			// e
			case 69:
				camera.position.y -= 0.05;
		}
		console.log(camera.position);
		renderer.render(scene, camera);
		console.log(camera.position);
	}, false);
}


const drawMoleculaStick = () => {
	let count = molecula.bonds.length;
	// определяем наибольшую z координату молекул для определения оптимального положения камеры
	let maxZ = -100;
	// цикл для отрисовки кадой связи молекулы
	for (let i = 0; i < count; i++) {
		// получение информации о молекулах, соединяемых текущей связью
		let currentBond = molecula.bonds[i];
		let startAtom = molecula.atoms[currentBond.atom1 - 1];
		let finishAtom = molecula.atoms[currentBond.atom2 - 1];

		if (startAtom.coords[2] > maxZ) {
			maxZ = startAtom.coords[2];
		}
		if (finishAtom.coords[2] > maxZ) {
			maxZ = finishAtom.coords[2];
		}

		// вычисление параметров цилиндра, изображающего связь между молекулами
		console.log(startAtom.coords[0], startAtom.coords[1], startAtom.coords[2]);
		console.log(finishAtom.coords[0], finishAtom.coords[1], finishAtom.coords[2]);
		let x = finishAtom.coords[0] - startAtom.coords[0],
			y = finishAtom.coords[1] - startAtom.coords[1],
			z = finishAtom.coords[2] - startAtom.coords[2];
		let cylinderHeight = Math.sqrt(x ** 2 + y ** 2 + z ** 2);
		let angleX = Math.acos(Math.abs(x) / cylinderHeight);
		let angleY = Math.acos(Math.abs(y) / cylinderHeight);
		let angleZ = Math.acos(Math.abs(z) / cylinderHeight);

		// создание первой половины цилиндра (так как разные половинки разных цветов (по цвету атома, к которому они примыкают))
		let geometry1 = new THREE.CylinderGeometry(radiusOfBoundCylinder, radiusOfBoundCylinder,
			cylinderHeight / 2, 30, 1, true);
		let material1 = new THREE.MeshBasicMaterial({color: startAtom.atom.color});
		let cylinder1 = new THREE.Mesh(geometry1, material1);
		cylinder1.position.set(startAtom.coords[0], startAtom.coords[1], startAtom.coords[2]);
		cylinder1.rotation.set(angleX, angleY, angleZ);
		scene.add(cylinder1);

		// вторая половинка
		let geometry2 = new THREE.CylinderGeometry(radiusOfBoundCylinder, radiusOfBoundCylinder,
		   cylinderHeight / 2, 30, 1, true);
		let material2 = new THREE.MeshBasicMaterial({color: finishAtom.atom.color});
		let cylinder2 = new THREE.Mesh(geometry2, material2);
		cylinder2.position.set(startAtom.coords[0] + x / 2, startAtom.coords[1] + y / 2, startAtom.coords[2] + z / 2);
		cylinder1.rotation.set(angleX, angleY, angleZ);
		scene.add(cylinder2);
	}
	// отрисовка сцены
	camera.position.z = maxZ + 0.5;
	renderer.render(scene, camera);
}