// https://discourse.threejs.org/t/limit-movement-dragcontrols/67149

import * as THREE from "three";
import { DragControls } from "three/addons/controls/DragControls.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import {
	acceleratedRaycast,
	computeBoundsTree,
	disposeBoundsTree,
	MeshBVHHelper
} from "https://unpkg.com/three-mesh-bvh@latest/build/index.module.js";

let renderer, scene, camera, dragcontrols, controls;
let objects, boxMesh1, boxMesh2, boxMesh3, boxMesh4, boxMesh5, ghost, dir;
let lastSafePosition = new THREE.Vector3();
let transformMatrix, hit;

THREE.Mesh.prototype.raycast = acceleratedRaycast;
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;

function init() {
	const bgColor = 0x263238;
	renderer = new THREE.WebGLRenderer({ antialias: false });
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor(bgColor, 1);
	renderer.outputColorSpace = THREE.SRGBColorSpace;
	document.body.appendChild(renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(
		75,
		window.innerWidth / window.innerHeight,
		0.1,
		1000
	);
	camera.far = 100;
	camera.updateProjectionMatrix();
	camera.position.set(1, 1, -5);

	controls = new OrbitControls(camera, renderer.domElement);

	boxMesh1 = new THREE.Mesh(
		new THREE.BoxGeometry(1, 1, 1),
		new THREE.MeshStandardMaterial({ color: 0x666666, emissive: 0xe91e63 })
	);
	scene.add(boxMesh1);

	boxMesh4 = new THREE.Mesh(
		new THREE.BoxGeometry(5, 2.5, 0.15),
		new THREE.MeshBasicMaterial({ color: 0xff0000 })
	);
	boxMesh4.position.set(0, 0.75, 2.5);
	boxMesh4.rotation.y = Math.PI * 0.25;
	boxMesh4.geometry.computeBoundsTree();
	scene.add(boxMesh4);

	ghost = boxMesh1.clone();
	ghost.material = new THREE.MeshBasicMaterial({
		color: "yellow",
		wireframe: true
	});
	ghost.position.set(0, 0, 0);
	scene.add(ghost);

	dir = new THREE.Vector3();

	dragcontrols = new DragControls([boxMesh1], camera, renderer.domElement);

	dragcontrols.addEventListener("dragstart", (event) => {
		controls.enabled = false;
	});

	let transparentCopy = null;
	const raycaster = new THREE.Raycaster();
	const mouse = new THREE.Vector2();

	const groundGeometry = new THREE.PlaneGeometry(18, 18);
	const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x222222 });
	const ground = new THREE.Mesh(groundGeometry, groundMaterial);
	ground.rotateX(-Math.PI / 2);
	ground.position.set(0, -0.5, 0);
	scene.add(ground);

	console.log(boxMesh1);

	document.addEventListener("mousemove", (event) => {
		mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
		mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
	});

	dragcontrols.addEventListener("drag", (event) => {
		// Update the position of boxMesh1
		boxMesh1.position.y = 0;
		boxMesh1.updateMatrixWorld();

		// Compute the transform matrix for collision detection
		let transformMatrix = new THREE.Matrix4()
			.copy(boxMesh4.matrixWorld)
			.invert()
			.multiply(boxMesh1.matrixWorld);

		// Check for collision
		let hit = boxMesh4.geometry.boundsTree.intersectsGeometry(
			boxMesh1.geometry,
			transformMatrix
		);

		if (!hit) {
			dir.subVectors(boxMesh1.position, ghost.position);

			raycaster.far = dir.length();
			raycaster.set(ghost.position, dir.normalize());

			if (raycaster.intersectObjects([boxMesh4]).length == 0)
				ghost.position.copy(boxMesh1.position);
		}
	});

	dragcontrols.addEventListener("dragend", (event) => {
		controls.enabled = true;
		boxMesh1.position.copy(ghost.position);
	});

	const metreSize = 10.0;
	const metreDivisions = 40.0;

	const gridHelper = new THREE.GridHelper(
		metreSize,
		metreDivisions,
		0x8fc8df,
		0x8fc8df
	);
	scene.add(gridHelper);

	gridHelper.position.set(0, -0.5, 0);
}

function render() {
	requestAnimationFrame(render);
	controls.update();
	renderer.render(scene, camera);
}

init();
render();