import { html, render } from 'lit-html';
import { ElementById, showElement, hideElement } from './helpers.js';

const overlayElement = ElementById('overlay');

export const showAlertModal = (text) => {
	showElement(overlayElement);
	return new Promise(resolve => {
		render(html`
			<div class="modal alert">
				${text}
				<br><button class="color" id="alertButton" @click=${() => { hideOverlay(); resolve(); }}>OK</button>
			</div>
		`, overlayElement);
		ElementById('alertButton').focus();
	});
};

export const showSelectModal = (items) => {
	showElement(overlayElement);
	return new Promise(resolve => {
		render(html`
			<div class="modal select flex-column">
				${items.map(
					(item) => html`<a class="button color" @click=${item.action}>${item.label}</a>`
				)}
				<a class="button color" @click=${() => { hideOverlay(); resolve(); }}>Close</a>
			</div>
		`, overlayElement);
	});
};

export const showModal = (title, content) => {
	showElement(overlayElement);
	return new Promise(resolve => {
		render(html`
			<div class="modal dialog">
				<div class="header flex-row">
					<h4>${title}</h4>
					<div class="icon-close" title="Close" @click=${() => { hideOverlay(); resolve(); }}></div>
				</div>
				<div class="body">${content}</div>
			</div>
		`, overlayElement);
	});
};

export const showLoader = () => {
	showElement(overlayElement);
	render(html`<div class="spinner"></div>`, overlayElement);
};

export const hideOverlay = () => hideElement(overlayElement);