// Inspired by https://www.thedolectures.com/products/habit-calendar
const grid = document.querySelector('.grid');
const cell = '<div class="cell"></div>';
const ROWS = 9;
const COLUMNS = 10;
const TOTAL_CELLS = COLUMNS * ROWS;

let cols = document.querySelector('#cols').value;
let rows = document.querySelector('#rows').value;

let totalCells = 0; 
let maxCells = TOTAL_CELLS;

const addInitialHTML = () => {
	let html = '';
	for (let i = 0; i < TOTAL_CELLS; i++) {
	   html += cell;
	}
	grid.innerHTML = html;	
};
addInitialHTML();





var cells = document.querySelectorAll('.cell');

const updateColsandRows = function(e) {
	if ('cols' === e.target.id) {
		cols = e.target.value;
		grid.style.setProperty('--cols', cols);
		localStorage.setItem('columns', cols);
	} else {
		rows = e.target.value;
		grid.style.setProperty('--rows', rows);
		localStorage.setItem('rows', rows);
	}

	let index = 0;
	maxCells = cols * rows;
	document.querySelector('#maxCells').innerHTML = maxCells;
	for (index; index < TOTAL_CELLS; index++) {
		if (index >= maxCells) {
			cells[index].style.display = 'none';		
		} else {
			cells[index].style.display = 'block';		
		}
	}
	
};

[...document.querySelectorAll('input')]
	.forEach(input => {
		// input.addEventListener('change', updateColsandRows);
		input.addEventListener('input', updateColsandRows);
	});

var cellTracking = document.querySelectorAll('.cell');

// Track the clicks on the days / cells
// Create empty array with 90 entries as zero.
var selectedCells = localStorage.getItem('cells');


// Check if there is a cells in localStorage.
if (typeof selectedCells === null) {
	const cellArray = [];
	
	for (let i = 0; i < totalCells; i++) {
		cellArray.push(0);
	}
	localStorage.setItem("cells", cellArray);
	localStorage.setItem("columns", COLUMNS);
	localStorage.setItem("rows", ROWS);

} else {
	console.log({selectedCells})
	if (selectedCells) {
		// on page load, go through localStorage 'cells' and add class to those ticked off.
		const selectedArray = selectedCells.split(',');
		totalCells = 0;
		for (var i = 0, len = selectedArray.length; i < len; i++) {
			if (selectedArray[i] === '1') {
				cellTracking[i].classList.add('cell--active');
				totalCells++;
			}
		}

		const columns = localStorage.getItem('columns');
		const rows = localStorage.getItem('rows');
		grid.style.setProperty('--cols', columns);
		grid.style.setProperty('--rows', rows);

		maxCells = rows * columns;
		let index = 0;
		for (index; index < TOTAL_CELLS; index++) {
			if (index >= maxCells) {
				cells[index].style.display = 'none';		
			} else {
				cells[index].style.display = 'block';		
			}
		}

		// update the inputs with the column/row values;
		const inputs = document.querySelectorAll('input');
		for (let input of inputs) {
			if ('cols' === input.id) {
				input.value = columns;
			} else {
				input.value = rows;
			}
		}
	}
}

const handleCellClick = (index) => {
	const cell = document.querySelector(`.cell:nth-child(${index + 1})`);
	
	cell.classList.toggle('cell--active');
	
	var selected = localStorage.getItem('cells') ?? "";
	const selectedArray = selected.split(',');
	
	var activeString = '0';
	if (cell.classList.contains('cell--active')) {
		activeString = '1';
		totalCells++;
	} else {
		totalCells--;
	}
	selectedArray.splice(index, 1, activeString);
	
	localStorage.setItem('cells', selectedArray);
	
	updateScore(totalCells);
};

const updateScore = (score) => {
	const span = document.querySelector('h1 span');
	span.innerHTML = `${score} / <span id="maxCells">${maxCells}</span>`;
}

// Handle Clicks on the cells
[...cellTracking].forEach((cell, index) => cell.addEventListener('click', handleCellClick.bind(null, index)));


document.querySelector('button').addEventListener('click', function() {
	window.print();
});