import chart from './chart.js';

window.addEventListener('DOMContentLoaded', (event) => {
	const mgToWeight = (value, unit) => {
		if (unit == 'g') {
			return Math.round(100 * value / 1000.0) / 100;
		} if (unit == 'kg') {
			return Math.round(100 * value / 1000000.0, 2) / 100;
		}
	};

	const addParents = (chartData, parent) => {
		if (parent) chartData.parent = parent;
		for (const i in chartData.points) {
			addParents(chartData.points[i], chartData);
		}
	}

	document.querySelector('.lpList').querySelectorAll('.lpUnitSelect').forEach((element) => {
		element.addEventListener('click', (event) => {
			event.stopPropagation();

			element.classList.toggle('lpOpen');
			const value = element.querySelector('.lpUnit').value;
			element.getElementsByTagName('ul')[0].classList.remove('g');
			element.getElementsByTagName('ul')[0].classList.remove('kg');
			element.getElementsByTagName('ul')[0].classList.add(value);
		});
	});

	document.querySelector('.lpList').querySelectorAll('.lpUnitSelect li').forEach((element) => {
		element.addEventListener('click', (event) => {
			const unitSelect = element.parentNode.parentNode
			const unit       = element.textContent;

			unitSelect.querySelector('.lpDisplay').textContent = unit;
			unitSelect.querySelector('.lpUnit').value          = unit;

			if ( unitSelect.parentNode.className === "lpTotalUnit" ) {
				unitSelect.parentNode.parentNode.querySelector('.lpTotalValue').textContent = mgToWeight(parseFloat(unitSelect.querySelector('.lpMG').value), unit);
				document.querySelectorAll('.lpDisplaySubtotal').forEach((element) => {
					element.nextElementSibling.innerHTML = unit;
					element.innerHTML                    = mgToWeight(element.getAttribute('mg'), unit);
				});
			} else {
				document.querySelectorAll('.lpWeight').forEach((element) => {
					const weightCell = element.parentNode;

					element.textContent = mgToWeight(parseFloat(weightCell.querySelector('.lpMG').value), unit);
					weightCell.querySelector('.lpDisplay').textContent = unit;
				});
			}
		});
	});

	document.querySelector('.lpCategories').querySelectorAll('.lpItemImage').forEach((element) => {
		element.addEventListener('click', (event) => {
			const imageModal = document.getElementById('lpImageDialog');
			const image      = document.createElement('img');
			image.setAttribute('src', element.getAttribute('href'));

			while (imageModal.lastChild) {
				imageModal.removeChild(imageModal.lastChild);
			}

			imageModal.append(image);

			image.addEventListener('load', () => {
				imageModal.style.display = 'block';
				document.getElementById('modalOverlay').style.display = 'block';
			});
		});
	});

	document.getElementById('modalOverlay').addEventListener('click', () => {
		document.getElementById('modalOverlay').style.display = 'none';;
		document.getElementById('lpImageDialog').style.display = 'none';;
	});

	document.addEventListener('click', () => {
		document.querySelectorAll('.lpOpen').forEach((element) => {
			element.classList.remove('lpOpen');
		});
	});

	if (typeof chartData !== "undefined") {
		chartData = JSON.parse(unescape(chartData));
		addParents(chartData, false);
		chart({
			processedData: chartData,
			container:     document.getElementById('chartContainer'),
			hoverCallback: (chartItem) => {
				document.querySelectorAll('.hover').forEach((element) => {
					element.classList.remove('hover');
				});
			
				if (chartItem && chartItem.id) {
					document.getElementById(`total_${chartItem.id}`).classList.add('hover');
				}
			}
		});
	}
});