function template(type, icon, title, text) {
	return `
		<div class="toast toast-${type}" role="alert">
	    <div class="toast-content">
	      <h4 class="toast-title">${icon} ${title}</h4>
	      <p class="toast-text">${text}</p>
	    </div>
	    <button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
	  </div>
	`;
}

function init(toast) {
	toast.close = function() {
		this.classList.add("a-hide");
		setTimeout(() => {
			this.remove();
		}, 300);
	}

	toast.querySelector(".toast-close").addEventListener("click", e => {
		toast.close();
	});

	toast.show = function() {
		document.querySelector("body").append(toast);

		setTimeout(() => {
			toast.classList.add("a-show");
		}, 10);
	}

	Screens.onSwitch((scr, alias) => {
		setTimeout(() => {
			toast.close();
		}, 10000);
	});

	return toast;
}

function create(type, icon, title, text) {
	const div = document.createElement("div");
	div.innerHTML = template(type, icon, title, text);

	return init(div.childNodes[1]);
}

function createSuccess(title, text) {
	return create(
		"success", 
		`<i class="ph ph-check-circle"></i>`, 
		title, 
		text
	);
}

function createInfo(title, text) {
	return create(
		"info", 
		`<i class="ph ph-info"></i>`, 
		title, 
		text
	);
}

function createWarning(title, text) {
	return create(
		"warning", 
		`<i class="ph ph-warning"></i>`, 
		title, 
		text
	);
}

function createError(title, text) {
	return create(
		"danger", 
		`<i class="ph ph-warning-octagon"></i>`, 
		title, 
		text
	);
}

export default {
  create,
  createInfo,
  createSuccess,
  createWarning,
  createError,
  "createDanger": createError
};