console.clear();


function calculatePaintBuckets(totalSquareFeet) {
	const squareFeetPerGallon = 400;
					// round up
	return Math.ceil(totalSquareFeet / squareFeetPerGallon);
}

// console.log( calculatePaintBuckets(600) );

function renderPaintBuckets(numberOfBuckets) {
	// all we know... is that we magically have the number of buckets...
	// could be 1 or 1645 buckets. (it's not an array) (just a number)
	// how do we present the graphics?
	
	var bucketGraphic = `
		<svg viewBox='0 0 4 6'>
			<rect width='4' height='6' fill='blue' />
		</svg>
	`;

	var bucketsGraphicTemplate = "<ul class='bucket-list'>";
	//           setup               condition (if)          changes per iteration
	for (var timesLooped = 0; timesLooped < numberOfBuckets; timesLooped++) {
		// console.log('[BUCKET]', timesLooped);
		// bucketsGraphicTemplate = bucketsGraphicTemplate + "[BUCKET]";
		// 					// short hand for ^		// add another bucket
		bucketsGraphicTemplate += `<li>${bucketGraphic}</li>`;
	}                     // tack this on the end
	bucketsGraphicTemplate += '</ul>';
	return bucketsGraphicTemplate;
}



function area(width, height) {
	return width * height;
}

function message(w, h, a) {
	// return `With a width of ${w} feet and height of ${h} feet, the total area would be ${a} square feet.`; // This one is hard to read... maybe not great UX
	return `
		${a} square feet.
	`;
}

// this way the function stands on its own. It can be tested alone and composed in more places
function handleAreaCalculation() {
	var theWidth = document.querySelector('#w').value;
	var theHeight = document.querySelector('#h').value;
	var areaTotal = area(theWidth, theHeight);
	var messageOutput = document.querySelector('output#message');
	messageOutput.textContent = message(theWidth, theHeight, areaTotal);

	var numberOfBuckets = calculatePaintBuckets(areaTotal);
	
	var graphicOutput = document.querySelector('output#graphic');
	graphicOutput.innerHTML = renderPaintBuckets(numberOfBuckets);
}

var form = document.querySelector('#myForm');

form.addEventListener('input', function() {
	handleAreaCalculation();
	
});

// run as a default / so user see how the form works (in this case)
handleAreaCalculation();


// function clearMessage() {
// 	var outputArea = document.querySelector('output');
// 	outputArea.textContent = "";
// }

// form.addEventListener('input', function() {
// 	clearMessage(); // so the message isn't out of date when the user is choosing numbers
// });

function handleOrder() {
	console.log('Send order message to buy appropriate paint gallons');
}

form.addEventListener('submit', function(event) {
	event.preventDefault();
	handleOrder();
	// clear info?
});