/**
* A UI component for displaying popups.
*
* @memberof module:libresignage/ui/components
*/
class Popup {
	/**
	* Construct a new Popup object.
	*
	* Popups work by wrapping an existing HTML element inside a popup
	* container and displaying it.
	*
	* @param {HTMLElement} The HTML element to wrap in a popup.
	*/
	constructor(element) {
		this.element = element;
		this.element.innerHTML = Popup.make_html(this.element.innerHTML);

		// Attach an event listener for the close button.
		this.element
			.querySelector('.popup-close')
			.addEventListener('click', () => {
				this.visible(false);
				this.element.dispatchEvent(
					new Event('component.popup.close')
				);
			})
	}

	/**
	* Create the Popup wrapper HTML.
	*
	* @param {string} content The text/html of the popup.
	*
	* @returns {string} The generated HTML.
	*/
	static make_html(content) {
		return `
			<div class="row popup-bar-row">
				<div class="col-12 text-right popup-bar">
					<i class="fas fa-times-circle link-nostyle popup-close"></i>
				</div>
			</div>
			<div class="row popup-content-row">
				<div class="col-12 container popup-content">
					${content}
				</div>
			</div>
		`;
	}

	/**
	* Show/hide a popup.
	*
	* @param {boolean} state True = visible, false = hidden.
	*/
	visible(state) {
		if (state) {
			this.element.classList.add('popup-visible');
		} else {
			this.element.classList.remove('popup-visible');
		}
	}
}
module.exports = Popup;
