import { html, render } from './lit-html.js';

export const ElementById = (id) => {
	return document.getElementById(id);
};

export const showDiv = (id) => {
	const element = document.getElementById(id);
	if (element) element.classList.remove('hidden');
	return true;
};

export const hideDiv = (id) => {
	const element = document.getElementById(id);
	if (element) element.classList.add('hidden');
	return true;
};


export const showAlertModal = (text) => {
	showDiv('overlay');
	render(html`
		<div class="modal">
			<div class="modal-alert">
				<div clas="modal-text">${text}</div>
				<div class="dismiss" @click=${hideOverlay}>OK</div>
			</div>
		</div>
	`, ElementById('overlay'));y
};

export const showModal = (title, content) => {
	showDiv('overlay');
	render(html`
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-close" @click=${hideOverlay}></div>
					<h4 class="modal-title">${title}</h4>
				</div>
				<div class="modal-body">${content}</div>
			</div>
		</div>
	`, ElementById('overlay'));
};

export const showLoader = () => {
	render(html`
		<div class="loading">
			<div class="spinner"></div>
		</div>
	`, document.getElementById('overlay'));
	showDiv('overlay');
	return true;
};

export const hideOverlay = () => hideDiv('overlay');

export const registerLoaderOnLinks = () => {
	let elements =  document.getElementsByTagName("a"); 

	for (let i = 0, element; element = elements[i]; i++) {
		element.addEventListener('click', (e) => {
			e.preventDefault();
			let target = e.target || e.srcElement;
			window.location = target.getAttribute("href")
			showLoader();
		}, false);
	}
}