const toastDetails = {
	info: {
		icon: 'fa-info-circle',
		classmod: 'toast--info'
	},
	success: {
		icon: 'fa-check-circle',
		classmod: 'toast--success'
	},
	warning: {
		icon: 'fa-exclamation-triangle',
		classmod: 'toast--warning'
	},
	error: {
		icon: 'fa-times-circle',
		classmod: 'toast--error'
	},
};

const removeToast = (toast)=> {
	toast.classList.add('toast--is-hiding');
	if (toast.timeoutId) clearTimeout(toast.timeoutId);
	setTimeout( ()=> toast.remove(),600);
};

const createToast = (message, title, style, timer)=> {
	let toasts = document.querySelector('.toasts'); 
	if (!toasts) {
		toasts = document.createElement('div');
		toasts.classList.add('toasts');
		document.querySelector('body').appendChild(toasts);
	};
	const { icon,classmod } = toastDetails[style];
	const toast = document.createElement('div');
	toast.className = `toast ${classmod}`;
	toast.style.setProperty('--toast-timer',timer+'ms');
	toast.innerHTML = ` <div class="toast__icon fas ${icon}"></div>
						<div class="toast__descr flex-grow-1">
							<div class="toast__title">${title}</div>
							<div class="toast__text">${message}</div>
						</div>
						<div class="toast__close fal fa-times" onclick="removeToast(this.parentElement)"></div>`;
	toasts.appendChild(toast);	
	toast.timeoutId = setTimeout( ()=> removeToast(toast),timer);		
};

function DLEalert(message, title, style = 'info', timer = 5000){
	createToast(message, title, style, timer);
};