let toastContainer
let lastToast
window.addEventListener("load", () => {
	toastContainer = document.getElementById("toast-container")

	// Get last toast
	const toastsOnLoad = toastContainer.children
	lastToast = toastsOnLoad.length - 1

	// Apply fadeout to all toasts
	for (let i = 0; i < lastToast + 1; i++)
		if (!toastsOnLoad[i].classList.contains("nofade"))
			setToastRemove(toastsOnLoad[i])
})

// Make new toast
function newToast(color, icon, text, noFade) {
	lastToast++

	let container = document.createElement("div")
	container.className = "toast-container"
	container.getAnimations().forEach(a => { a.cancel(); a.play() })

	// Invisible checkbox that removes the toast
	let input = document.createElement("input")
	input.setAttribute("type", "checkbox")
	input.setAttribute("id", lastToast)
	container.appendChild(input)

	// Toast color and content
	let toast = document.createElement("div")
	toast.className = "toast"
	if (color)
		toast.classList.add(color)
	toast.innerText = text
	container.appendChild(toast)

	// Icon
	if (icon) {
		let ic = document.createElement("div")
		ic.className = "icon"
		ic.classList.add(icon)
		toast.insertBefore(ic, toast.firstChild)
	}

	// X button that appears when hovering
	let overlay = document.createElement("label")
	overlay.className = "close-overlay"
	overlay.setAttribute("for", lastToast)
	container.appendChild(overlay)

	toastContainer.appendChild(container)

	// Add timeout
	if (noFade)
		container.classList.add("nofade")
	else
		setToastRemove(container)
	return { id: lastToast, container }
}

async function newToastWhenReady(color, icon, text, noFade) {
	if (!toastContainer) {
		await new Promise(resolve => {
			setTimeout(() => {
				if (toastContainer)
					resolve()
			}, 200)
		})
		return newToast(color, icon, text, noFade)
	} else
		return newToast(color, icon, text, noFade)
}

// Set timeout on toasts
function setToastRemove(toast) {
	toast.classList.remove("nofade")
	setTimeout(() => {
		// const checkbox = toast.firstElementChild
		// checkbox.checked = true
		toast.remove()
	}, 1000 * 5)
}