import h from '../Util/DomUtil.js';
import { dist, AABB, QuadTree } from '../Geometry/Geometry.js';
import { Shape } from './Shapes.js';


class Transform {
	constructor() {
		this.scale = 1;
		this.pan = {
			x: 0,
			y: 0,
		};
	}

	screenToDrawing(x, y) {
		return [
			(this.scale * x) - this.pan.x,
			(this.scale * y) - this.pan.y,
		];
	}

	drawingToScreen(x, y) {
		return [
			(x + this.pan.x) / this.scale,
			(y + this.pan.y) / this.scale,
		];
	}
}


class Mouse {
	constructor(canvas) {
		this.position = { x: 0, y: 0 };

		this.onMouseMove = null;
		this.onClick = null;

		canvas.addEventListener('mousemove', e => {
			this.position.x = e.offsetX;
			this.position.y = e.offsetY;
			if (this.onMouseMove) this.onMouseMove();
		});

		canvas.addEventListener('click', e => {
			if (this.onClick) this.onClick();
		});
	}

	getPosition(transform) {
		const { x, y } = this.position;
		return transform.screenToDrawing(x, y);
	}
}


class Canvas {
	constructor(parentId) {
		const parentElement = document.getElementById(parentId);
		this.canvas = h('canvas', 
			{
				width: parentElement.clientWidth, 
				height: parentElement.clientHeight
			}
		);
		this.context = this.canvas.getContext('2d');

		parentElement.appendChild(this.canvas);
	}

	/* ~~~~~~~~~~~~~~~~ drawing ~~~~~~~~~~~~~~~~ */

	render(transform, shapes) {
		this.context.save();
		this.context.setTransform(1, 0, 0, 1, 0, 0);
		this.context.scale(transform.scale, transform.scale);
		this.context.translate(transform.pan.x, transform.pan.y);

		for (let shape of shapes) {
			switch(shape.type) {
				case Shape.Point:
					this.drawPoint(shape);
					break;

				case Shape.Path:
					this.drawPath(shape);
					break;

				case Shape.Polygon:
					this.drawPolygon(shape);
					break;

				case Shape.Text:
					this.drawText(shape);
					break;

				default:
					break;
			}
		}
		this.context.restore();
	}

	drawPoint(shape) {
		const ct = this.context;
		ct.beginPath();
		ct.arc(shape.nodes[0].x, shape.nodes[0].y, 2, 0, 2*Math.PI);
		ct.closePath();
		ct.fill();
	}

	drawPath(shape) {
		const ct = this.context;
		ct.beginPath();
		ct.moveTo(shape.nodes[0].x, shape.nodes[0].y);
		for(let point of shape.nodes.slice(1)) {
			ct.lineTo(point.x, point.y);
		}
		ct.stroke();
		ct.closePath();
	}

	drawPolygon(shape) {
		const ct = this.context;
		ct.beginPath();
		ct.moveTo(shape.nodes[0].x, shape.nodes[0].y);
		for (let point of shape.nodes.slice(1)) {
			ct.lineTo(point.x, point.y);
		}
		ct.closePath();
		ct.stroke();
		ct.fill();
	}

	drawText(shape) {
		console.log('yes');
		const ct = this.context;
		ct.fillText(shape.text, shape.nodes[0].x, shape.nodes[0].y);
	}
}


export { Transform, Mouse, Canvas };