const toastTemplate = `
    <div class="toast mt-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
        <div class="toast-header">
            <i class="toast-icon bi me-2"></i>
            <strong class="toast-title me-auto">Bootstrap</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body"></div>
        <div class="progress mb-0" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar" style="width: 100%"></div>
        </div>
    </div>
`

const toastTypes = {
    "primary": "bi-bell-fill",
    "info": "bi-info-circle-fill",
    "warning": "bi-exclamation-triangle-fill",
    "danger": "bi-exclamation-circle-fill",
    "success": "bi-check-circle-fill"
}

function animateToastProgress(progressBar, durationMs) {
    progressBar.css({
        "animation-duration": (durationMs / 1000) + "s",
        "animation-name": "decreaseProgressWidth",
        "animation-fill-mode": "forwards",
        "animation-timing-function": "linear"
    });
}

function showToast(typeName, title, message, duration=5000) {
    var toast = makeToast(typeName, title, message)
    $(".toasts-container").append(toast);
    
    toast.toast("show");

    var progressBar = toast.find(".progress-bar");
    progressBar.on("animationend", function() {
        toast.toast("hide");
        setTimeout(function() {toast.remove()}, 1500);
    });

    animateToastProgress(progressBar, duration);
}

function makeToast(typeName, title, message) {
    const iconClass = toastTypes[typeName];
    var template = $(toastTemplate);
    template.find(".toast-icon").addClass(`text-${typeName}`).addClass(iconClass);
    template.find(".progress-bar").addClass(`bg-${typeName}`);
    template.find(".toast-body").html(message);
    template.find(".toast-title").text(title);

    return template;
}