import render from "./modules/langton-renderer-canvas2d";
import Ant from "./modules/Ant.js";


const options = {
	antStateColors : ['red','yellow'],
	tileStateColors : ['white','black'],
	tileSize : 10 
};


// For the view

const STEP_INTERVAL = 5; 
const BTN_AUTOPLAY_ID = 'autoplay';
const BTN_NEXT_MOVE_ID = 'next-move';
const BTN_RESET_ID = 'reset';
const MOVE_VAL_ID = 'move-value';
const BTN_PLUS_100_ID = 'plus-100';




let autoplayInterval;
let auto=false;
let canvas = document.querySelector("canvas");


canvas.width = window.innerWidth ;
canvas.height = window.innerHeight;

let ant = new Ant(Math.floor(canvas.width / options.tileSize),Math.floor(canvas.height/options.tileSize));

function boucle() {
	ant.moveForward();
	updateView(ant,canvas,options)
	if (auto === true){
		setTimeout(boucle, STEP_INTERVAL);
	}
  }

document.getElementById(BTN_AUTOPLAY_ID).addEventListener('click', () => {
	auto = !auto;
	boucle();
});


document.getElementById(BTN_PLUS_100_ID).addEventListener('click', () => {
	for (let i=0; i<100; i++){
		ant.moveForward();
	}
	updateView(ant,canvas,options)
});

document.getElementById(BTN_NEXT_MOVE_ID).addEventListener('click', () => {
	ant.moveForward();
	updateView(ant,canvas,options)
})

document.getElementById(BTN_RESET_ID).addEventListener('click', () => {
	ant.reset();
	updateView(ant,canvas,options)
})


function updateView(ant,canvas,options)
{
	document.getElementById(MOVE_VAL_ID).textContent = `${ant.move}`;
	render(ant,canvas,options);
}


updateView(ant,canvas,options,1)