"use strict";

const core = require("./core");

const api = core(document.getElementById("canvas"));

const $x = document.getElementById("x");
const $y = document.getElementById("y");
const $zoom = document.getElementById("zoom");
const $size = document.getElementById("size");
const $type = document.getElementById("type");

api.render = (function(old){
	return function(){
		const camera = api.camera();
		const line = api.line();

		$x.value = camera.x;
		$y.value = camera.y;
		$zoom.value = camera.zoom;

		$size.value = line.size;
		$type.value = line.type;

		return old.apply(this, arguments);
	}
})(api.render);

Array.from(document.getElementsByName("preset")).forEach(preset => {
	preset.addEventListener("change", e => {
		if(e.target.checked){
			let name = e.target.value;

			console.log(`use preset [${name}]`);

			api.preset(name);

			api.render();
		}
	});
});

$x.addEventListener("change", e => {
	api.camera({
		x: parseFloat(e.target.value)
	});

	api.render();
});

$y.addEventListener("change", e => {
	api.camera({
		y: parseFloat(e.target.value)
	});

	api.render();
});

$zoom.addEventListener("change", e => {
	api.camera({
		zoom: parseFloat(e.target.value)
	});

	api.render();
});

$size.addEventListener("change", e => {
	api.line({
		size: parseFloat(e.target.value)
	});

	api.render();
});

$type.addEventListener("change", e => {
	console.log(e.target.value);

	api.line({
		type: e.target.value
	});

	api.render();
});

api.render();

module.exports = api;
