import Canvas from './Canvas.js';
import { Mat3, Vec3, Point, Shape } from './Geometry.js';


const xAxis = new Vec3(1, 0, 0);
const yAxis = new Vec3(0, 1, 0);
const zAxis = new Vec3(0, 0, 1);


function radians(degrees) {
	return degrees * (Math.PI/180);
}

function Circle(p0, axis, subdiv) {
	const rotationMatrix = new Mat3().rotation(axis, 2*Math.PI/(subdiv-1));
	const points = [p0];
	for (let i=0; i<subdiv-1; i++) {
		const point = rotationMatrix.mulv(points[i]);
		points.push(point);
	}
	return new Shape(points);
}

export class MapGrid {
	constructor(latDiv, longDiv, circleDiv=50) {
		// create latitudes
		this.latitudes = [];
		// equator
		this.latitudes.push(Circle(
			new Point(0, radians(0)).normal(), yAxis, circleDiv
		));
		for (let angle=latDiv; angle<90; angle += latDiv) {
			// positive (north)
			this.latitudes.push(Circle(
				new Point(0, radians(angle)).normal(), yAxis, circleDiv
			));
			// negative (south)
			this.latitudes.push(Circle(
				new Point(0, radians(-angle)).normal(), yAxis, circleDiv
			));
		}

		// create longitudes
		this.longitudes = [];
		for (let angle=0; angle<180; angle += longDiv) {
			console.log(angle);
			const point = new Point(radians(angle), 0).normal();
			const axis = point.cross(yAxis).normalize();
			console.log(axis);
			this.longitudes.push(Circle(
				point, axis, circleDiv
			));
		}
	}

	render(ct, view) {
		ct.beginPath();
		ct.arc(0, 0, 1, 0, 2*Math.PI);
		ct.stroke();

		for (let latitude of this.latitudes) {
			latitude.render(ct, view);
		}
		for (let longitude of this.longitudes) {
			longitude.render(ct, view);
		}
	}
}


export class MapView {
	constructor(canvas) {
		this.canvas = canvas;
		canvas.onDraw = ct => this.draw(ct);

		this.pitch = 0;
		this.yaw = 0;

		this.scale = 1;
		this.sensitivity = 1;

		canvas.element.addEventListener("mousemove", e => {
			if (e.buttons % 2 == 1) {
				// primary button is being pressed
				this.onDrag(e.movementX, e.movementY);
			}
		});

		canvas.element.addEventListener("wheel", e => {
			this.zoom(e.deltaY);
		})

		this.view = new Mat3();
	}

	onDrag(dx, dy) {
		this.yaw += 0.01*dx*this.sensitivity;
		this.pitch += 0.01*dy*this.sensitivity;
		if (Math.abs(this.pitch) > 0.5*Math.PI) {
			this.pitch -= 0.01*dy;
		}
		this.view.rotation(xAxis, this.pitch).mul(new Mat3().rotation(yAxis, this.yaw));
		this.canvas.draw();
	}

	zoom(delta) {
		let scale;
		const zoom = 1.1;
		if (delta < 0) {
			scale = zoom;
		}
		else {
			scale = 1/zoom;
		}

		this.scale *= scale;
		this.sensitivity /= scale;
		if (this.scale < 1) {
			this.scale = 1;
			this.sensitivity = 1;
		}

		this.canvas.draw();
	}

	draw(ct) {
		if (this.onDraw) {
			const transform = ct.getTransform();
			ct.transform(this.scale, 0, 0, this.scale, 0, 0);
			this.onDraw(ct, this.view);
			ct.setTransform(transform);
		}
	}
}