alertIdArray = [];
window.YT = typeof YT == "undefined" ? {} : YT;
window.YT.Alert = { Success: null, Error: null, Tip: null };


YT.Alert.Success = function (text) {
    let ranId = Math.floor(Math.random() * 100000);
    $("body").append(`<div id='success-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
                        <span class="material-icons fs-3">check_circle</span><strong>${text}</strong></div>`)

    //紀錄上一筆出現的alert
    alertIdArray.push("success-alert-" + ranId)
    alertIdArray.length > 2 ? alertIdArray.shift() : ""
    $("#success-alert-" + ranId).fadeIn(300);
    //判斷上一筆是否還存在頁面中
    if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
        //存在的話下一個alert出現在前一個alert上面
        let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
        $("#" + alertIdArray[1]).css("bottom", newAlertWidth);
    }
    $("#success-alert-" + ranId).click(function () {
        $("#success-alert-" + ranId).fadeOut(300);
    })

    setTimeout(function () { $("#success-alert-" + ranId).fadeOut(300); }, 6000);
    setTimeout(function () {
        $("#success-alert-" + ranId).remove();
        alertIdArray.splice($.inArray("#success-alert-" + ranId, alertIdArray), 1);
    }, 7000);

}

YT.Alert.Error = function (text) {
    let ranId = Math.floor(Math.random() * 100000);
    $("body").append(`<div id='danger-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
                    <span class="material-icons fs-3">error</span><strong>${text}</strong></div>`)

    alertIdArray.push("danger-alert-" + ranId);
    alertIdArray.length > 2 ? alertIdArray.shift() : ""
    $("#danger-alert-" + ranId).fadeIn(300);
    if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
        let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
        $("#" + alertIdArray[1]).css("bottom", newAlertWidth);
    }
    $("#danger-alert-" + ranId).click(function () {
        $("#danger-alert-" + ranId).fadeOut(300);
    })

    setTimeout(function () {
        $("#danger-alert-" + ranId).fadeOut(300);
        alertIdArray.splice($.inArray("#danger-alert-" + ranId, alertIdArray), 1);
    }, 6000);
    setTimeout(function () { $("#danger-alert-" + ranId).remove(); }, 7000);

}

YT.Alert.Tip = function (text, type = null,isLoading = true, color = null) {
    let ranId = Math.floor(Math.random() * 100000);
    let iconHtml = "";
    if (isLoading) {
        iconHtml = `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`;
    } else {
        iconHtml = `<span class="material-icons fs-3">error</span>`;
    }
    $("body").append(`<div id='tip-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
                    ${iconHtml}<strong id="alert-text-${ranId}">${text}</strong></div>`)

    alertIdArray.push("tip-alert-" + ranId);
    alertIdArray.length > 2 ? alertIdArray.shift() : ""
    if (color != null) {
        $("#tip-alert-" + ranId).css("background-color", color);
    }

    if (type == null) {
        $("#tip-alert-" + ranId).fadeIn(300);
        if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
            let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
            $("#" + alertIdArray[1]).css("bottom", newAlertWidth);
        }
        $("#tip-alert-" + ranId).click(function () {
            $("#tip-alert-" + ranId).fadeOut(300);
        })
        setTimeout(function () {
            $("#tip-alert-" + ranId).fadeOut(300);
            alertIdArray.splice($.inArray("#tip-alert-" + ranId, alertIdArray), 1);
        }, 6000);

        setTimeout(function () { $("#tip-alert-" + ranId).remove(); }, 7000);
    } else if (type == "show") {
        $("#tip-alert-" + ranId).fadeIn(300);
    } else if (type == "hide") {
        $("#tip-alert-" + ranId).fadeOut(300);
        alertIdArray.splice($.inArray("#tip-alert-" + ranId, alertIdArray), 1);
        setTimeout(function () {
            $("#tip-alert-" + ranId).remove();
        }, 1000);
    }
    return { id: "#tip-alert-" + ranId, ele: $("#tip-alert-" + ranId) };

}


//因非使用 Require 引用，$.fn 被二次引用 jquery.js 吃掉，則移至 site.js

//$.fn.YTAlert = function () {
//    let th = { element: this };
//    th.hide = function (delay = 0) {
//        let obj = this;
//        setTimeout(function () {
//            $(obj.element).fadeOut(300);
//            alertIdArray.splice($.inArray($(obj.element).prop("id"), alertIdArray), 1);
//            setTimeout(function () {
//                $(obj.element).remove();
//            }, 1000);
//        }, delay);
//    }

//    th.text = function (text) {
//        let obj = this;
//        let id = $(obj.element).prop("id").split("tip-alert-")[1];
//        $(`#alert-text-${id}`).text(text);
//    }
//    return th;
//}