const TEXTAREA = document.getElementById("textarea");
const OUT = document.getElementById("output");
// ignore alphas, spaces, and new line characters
const ALPHAS = "abcdefghijklmnopqrstuvwxyz \n";
const isAlphaIgnored = document.getElementById("alpha");

let counter = (str) => {
	return str
		.toLowerCase()
		.split("")
		.reduce((total, letter) => {
			if (isAlphaIgnored.checked) {
				if (!ALPHAS.includes(letter)) {
					total[letter] ? total[letter]++ : (total[letter] = 1);
				}
			} else {
				total[letter] ? total[letter]++ : (total[letter] = 1);
			}
			return total;
		}, {});
};

function sort(obj) {
	return Object.entries(obj).sort((a, b) => b[1] - a[1]);
}

TEXTAREA.addEventListener("input", (e) => {
	let sorted = sort(counter(e.target.value));
	// OUT.textContent = JSON.stringify(sorted);
	console.log(isAlphaIgnored.checked);
	createTable(sorted);
});

// Function to create and fill the table
function createTable(data) {
	// Create table and thead elements
	const table = document.createElement("table");
	const thead = document.createElement("thead");
	const tbody = document.createElement("tbody");
	const headerRow = document.createElement("tr");

	// Define headers
	const headers = ["Character", "Frequency"];
	headers.forEach((headerText) => {
		const header = document.createElement("th");
		header.textContent = headerText;
		headerRow.appendChild(header);
	});

	thead.appendChild(headerRow);
	table.appendChild(thead);

	// Fill the table body with data
	data.forEach((rowData) => {
		const row = document.createElement("tr");
		rowData.forEach((cellData) => {
			const cell = document.createElement("td");
			cell.textContent = cellData;
			row.appendChild(cell);
		});
		tbody.appendChild(row);
	});

	table.appendChild(tbody);

	// Append the table to the container
	document.getElementById("output").innerHTML = table.outerHTML;
}