"use strict";

$(document).ready(() => {
    const endpoint = location.host === 'forum.mcmp.su' ? 'https://mcmp.su' : ''

    const Monitoring = {
        servers: [ {"name":"Magic 1.12.2","url":"\/magic"}, {"name":"TechnoMagic 1.12.2","url":"\/technomagic"}, {"name":"TechnoMagic Sky 1.12.2","url":"\/tmsky"} ],
        updateMon: () => {
            const servers = Monitoring.servers;
            let newHTML

            $.ajax({
                url: `${endpoint}/monitoring/f`,
                beforeSend: () => {
                    newHTML = "";
                    let owidth = [];
                    for (let i = 0; i < servers.length; i++)
                        newHTML += Monitoring.genHTML(servers[i]["name"], "", 2);

                    $(".OneServer").each((i, e) => owidth.push($(e).find(".OnlineBar").data("width")));
                    newHTML += Monitoring.comHTML("", 2);
                    $("#Monitoring").html(newHTML);
                    $(".OneServer").each((i, e) => {
                        $(e.currentTarget).find(".OnlineBar").css('width', owidth[i]);
                        $(e.currentTarget).find(".OnlineBar").animate({
                            "width": "100%"
                        }, 1200);
                    });
                },
                success: data => {
                    data = JSON.parse(data);
                    newHTML = "";

                    for (let i = 0; i < servers.length; i++)
                        newHTML += Monitoring.genHTML(servers[i]["name"], data, 1);

                    newHTML += Monitoring.comHTML(data, 1);
                },
                error: () => {
                    newHTML = "";
                    for (let i = 0; i < servers.length; i++)
                        newHTML += Monitoring.genHTML(servers[i]["name"], "", 3);

                    newHTML += Monitoring.comHTML("", 3);
                },
                complete: () => {
                    setTimeout(() => {
                        $("#Monitoring").html(newHTML);
                        $(".OneServer").each((i, e) => {
                            $(e).find(".OnlineBar").animate({
                                "width": $(e).find(".OnlineBar").data("width")
                            }, 550);
                        });
                    }, 1210);
                }
            });
        },
        genHTML: (server, data, genType) => {
            let onBar, srvOnlStr, statusClass, id;

            if (genType === 1) {
                const {s: _statusClass, i: _id, o: _online, m: _slots} = data[server]
                statusClass = _statusClass;
                id = _id;

                if (statusClass === "offline") {
                    srvOnlStr = '<span class="monTrouble">Недоступен</span>';
                    onBar = 100;
                } else {
                    srvOnlStr = _online + ' <i class="fa fa-regular fa-user fa-fw"></i>';

                    if (_online >= _slots) {
                        onBar = 100
                        statusClass = 'full'
                    } else {
                        onBar = Math.min((_online / _slots) * 100, 100) * (_slots >= 100 ? 1.65 : (_slots <= 40 ? 0.9 : 1.65))
                    }
                }
            }

            if (genType === 2) {
                srvOnlStr = '<i class="fa fa-solid fa-spinner fa-pulse fa-fw"></i>';
                onBar = 100;
                statusClass = "loading";
            }

            if (genType === 3) {
                srvOnlStr = "<span class='monTrouble'>Ошибка..</span>";
                onBar = 100;
                statusClass = "upderr";
            }

            return `
                <div class="OneServer">
                    <div class="ServInfo">
                        <a class="ServName" data-id="${id}">${server}</a>
                        <span class="ServOnline">${srvOnlStr}</span>
                    </div>
                    <div class="BarCont">
                        <div class="OnlineBar ${statusClass}" data-width="${onBar}%"></div>
                    </div>
                </div>
            `;
        },
        comHTML: (data, genType) => {
            let todRec, timeTodRec, fullOnlStr;

            switch (genType) {
                case 1:
                    fullOnlStr = Util.declOfNum(data['comStats'][1], ['игрок', 'игрока', 'игроков']);
                    todRec = Util.declOfNum(data['comStats'][3], ['игрок', 'игрока', 'игроков']);
                    timeTodRec = `title="Сегодня в ${data['comStats'][6]}"`;
                    break;
                case 2:
                    fullOnlStr = todRec = '<i class="fa fa-solid fa-spinner fa-pulse fa-fw"></i>';
                    break;
                case 3:
                    fullOnlStr = todRec = 'Ошибка..';
            }

            return `
                <div id="CommonOnline">
                    <p>Общий онлайн: ${fullOnlStr}</p>
                    <p data-ipstooltip="" _${timeTodRec} data-toggle="tooltip" data-placement="bottom" ${timeTodRec}>Сегодняшний рекорд: ${todRec}</p>
                </div>
            `;
        }
    };

    $(document).on('click', '.ServName', e => {
        if (typeof Swal === "undefined") return;

        const item = $(e.currentTarget)
        const id = item.data('id')
        let srv

        for (const i in Monitoring.servers)
            if (Monitoring.servers[i].name === item.text())
                srv = Monitoring.servers[i];

        if (!srv) return;

        Util.showModal({
            title: `<strong>Сервер ${srv.name}</strong>`,
            html: `<div id="sinfo_stat_${id}" style="height:220px"></div>`,
            width: 1000,
            showCloseButton: true,
            showCancelButton: false,
            confirmButtonText: '<i class="fa fa-regular fa-link"></i> Открыть страницу сервера',
            didOpen: () => {
                $.getJSON(`${endpoint}/stats/json/monthly`, t => {
                    Highcharts.chart('sinfo_stat_' + id, {
                        chart: {type: "spline", zoomType: "x"},
                        credits: {enabled: !1},
                        title: {text: ""},
                        xAxis: {type: "datetime"},
                        yAxis: {title: {text: ""}, plotLines: [{value: 0, width: 1, color: "#808080"}]},
                        legend: {enabled: !1},
                        plotOptions: {
                            area: {
                                fillColor: {
                                    linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                    stops: [[0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get("rgba")]]
                                },
                                marker: {radius: 2}, lineWidth: 1, states: {hover: {lineWidth: 1}}
                            }
                        },
                        series: [{type: "area", name: "Игроков онлайн", data: t[id]}]
                    })
                })
            }
        }).then((result) => {
            if (result.value) location.href = srv.url;
        })
    });

    setInterval(Monitoring.updateMon, 40000);
    Monitoring.updateMon()
});