/*
<div class="col-xs-8">
                    <div class="row row-cols-5">
                        <div class="col-xs-3 col-xl-3" >
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035250528554319982/pootisd.png">
                        </div>
                        <div class="col-xs-2 col-xl-2">
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035250528973754428/pyro.png" >
                        </div>
                        <div class="col-xs-2 col-xl-2">
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035253201563303967/toilet.png" >
                        </div>
                        <div class="col-xs-2 col-xl-2">
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035250529389002862/engi_n.png" >
                        </div>
                        <div class="col-xs-3 col-xl-3">
                            <img style="width: 17em;" src="https://media.discordapp.net/attachments/976544929566318613/1035250529883918448/mgesold.png" >
                        </div>
                    </div>
                </div>
*/

$(async function() {
    $(document).on("keypress", "input", function (e) {
        var code = e.keyCode || e.which;
        if (code == 13) {
            e.preventDefault();
            return false;
        }
    });

    FillCharacters();
    FillRules();
    await CheckApi();
    await RequestAPI();

    if(window.location.href.endsWith("#RulesSection")){
        document.getElementById('Rules_Button').click();
    }

    if(window.location.href.endsWith("#VIPSection")){
        document.getElementById('Tab_VIP_Button').click();
    }
});

let servers_active = `
<div class="row text-center">
    <div class="col">
        <hr>
        <h6>Где сейчас играют карлики</h6>
    </div>
</div>
`

let servers_inactive = `
<div class="row text-center">
    <div class="col">
        <hr>
        <h6>Пустую без дела</h6>
    </div>
</div>
`

let servers_dead = `
<div class="row text-center">
    <div class="col">
        <hr>
        <h6>Временно отключены</h6>
    </div>
</div>
`

let invalid_captcha = `
<div class="col" id="InvalidCaptcha">
    <br>
    <h1 style="color: red">ДЯДЯ ТЫ ДУРАЧЕК, КАПЧА НЕПРАВИЛЬНАЯ, ЖМИ СНОВА НА КНОПКУ</h1>
</div>
`

function generate_server_card_div(data){
    return `
<div class="col-auto justify-content-center align-self-center" style="padding: 1rem;">
    <div class="card text-right" style="width: 15rem; height: 15rem;">
        <img class="card-img" src="${data.preview}" alt="${data.name}" style="filter: blur(1px); height: 100%;">
        <div class="card-img-overlay" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.7))"><!--background-color: rgba(0, 0, 0, 0.205);-->
            <a href="steam://connect/${data.address}" class="stretched-link" ${data.status ? "" : "disabled"}></a>
            <h4 class="card-title" style="color: whitesmoke;">${data.name}</h4>
            <p class="card-text" style="color: whitesmoke; font-family: tf2build; font-size: 3rem; text-align: center;">${data.player_count}/${data.max_players}</p>
            <h4 class="card-title" style="color: whitesmoke; text-align: right;">${data.human_name}</h4>
        </div>
    </div>
</div>
`
}

async function CheckApi() {
    let api_request_time = (new Date).getTime();
    await fetch("https://tf2.pblr-nyk.pro/api", {headers: {'Cache-Control':'no-cache'}})
    .then(res => res.text())
    .then(res => {api_request_time = (new Date).getTime() - api_request_time})
    .catch(err => {api_request_time = 0});
    ////////////////////////////////////////////
    let player_api_request_time = (new Date).getTime();
    await fetch("https://tf2.pblr-nyk.pro/player_api/v1/ping", {headers: {'Cache-Control':'no-cache'}})
    .then(res => res.text())
    .then(res => {player_api_request_time = (new Date).getTime() - player_api_request_time})
    .catch(err => {player_api_request_time = 0});
    ////////////////////////////////////////////
    FillFooter("", api_request_time, player_api_request_time);
}

async function RequestAPI() {
    //let api_request_time = (new Date).getTime();
    //, {headers: {'Cache-Control':'no-cache'}}
    await fetch("https://tf2.pblr-nyk.pro/api/stats", {headers: {'Cache-Control':'no-cache'}})
        .then(res => res.json())
        .then(res => {
            FillServices(res);
            document.getElementById("current_players").innerHTML = res.servers.statistic.player_now;
            document.getElementById("max_per_day").innerHTML = res.servers.statistic.player_max;
            document.getElementById("servers_works").innerHTML = res.servers.statistic.working_servers + '/' + res.servers.statistic.total_servers;
            document.getElementById("uniq_day_players").innerHTML = res.uniq.day;
            document.getElementById("uniq_month_players").innerHTML = res.uniq.month;
            document.getElementById("uniq_year_players").innerHTML = res.uniq.year;
            document.getElementById("ServersSectionLastUpdate").innerHTML = `Информация обновлена: ${UNIX2TIMESTAMP(res.updates.servers)}`;
            document.getElementById("AboutSection_discord").innerHTML = `${res.discord_users} ГЕЙмеров `;
            document.getElementById("AboutSection_vk").innerHTML = `${res.vk_users} Участников `;
            document.getElementById("Section_VIP_users").innerHTML = `${res.vip_players} карликов уже имеют випку!`;
                        
            let active = false;
            let inactive = false;
            let dead = false;

            let insert_type = "beforeend";
            //active servers
            let sorted_servers = Object.keys(res.servers).sort((a, b) => {
                return res.servers[b].player_count - res.servers[a].player_count;
            });
            //console.log(sorted_servers);
            for (let sort_id in sorted_servers) {
                let server = sorted_servers[sort_id];
                if (server == `statistic`) {continue;}
                if(res.servers[server].status == true && res.servers[server].player_count > 0) {
                    if(!active) {
                        document.getElementById("servers_list_v2").insertAdjacentHTML(insert_type,servers_active)
                        active = true;
                    }
                    document.getElementById("servers_list_v2").insertAdjacentHTML(insert_type,generate_server_card_div(res.servers[server]));
                }
                else if (res.servers[server].status == true && res.servers[server].player_count == 0) {
                    if(!inactive) {
                        document.getElementById("servers_list_v2").insertAdjacentHTML(insert_type,servers_inactive)
                        inactive = true;
                    }
                    document.getElementById("servers_list_v2").insertAdjacentHTML(insert_type,generate_server_card_div(res.servers[server]));
                }
            }

            for (let sort_id in sorted_servers) {
                let server = sorted_servers[sort_id];
                if (res.servers[server].status == false) {
                    if(!dead) {
                        document.getElementById("servers_list_v2").insertAdjacentHTML(insert_type,servers_dead)
                        dead = true;
                    }
                    document.getElementById("servers_list_v2").insertAdjacentHTML(insert_type,generate_server_card_div(res.servers[server]));
                }
            }
        }).catch((err) => {
            console.log(err);
            //FillFooter("", 0, 0);
        });

    //FillFooter("", api_request_time, "");
}

function FillFooter(data, api_time, player_api_time){
    const text = `<p class="current-profile-text">{text}</p>`;
    const text_bad = `<p class="current-profile-text current-profile-text-color-alarm">{text}</p>`;
    const text_good = `<p class="current-profile-text current-profile-text-color-normal">{text}</p>`;

    while(document.getElementById("Footer_Text").firstChild) {
        document.getElementById("Footer_Text").lastChild.remove();
    }

    document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{text}", `2018-${(new Date()).getFullYear()} | `));
    document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{text}", `Факты 13 | `));
    document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{text}", `JS: `));
    document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_good.replace("{text}", `on`));

    document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{text}", ` | API: `));//${api_time} ms
    if(api_time == 0) {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_bad.replace("{text}", `not work`));
    } else {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_good.replace("{text}", `${api_time} ms`));
    }

    document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{text}", ` | Player API: `));
    if(player_api_time == 0) {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_bad.replace("{text}", `not work`));
    } else {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text_good.replace("{text}", `${player_api_time} ms`));
    }
}

function FillServices(data) {
    const ping_time = 90;
    const text = `<p class="current-profile-text" id="{service_id}"></p>`;

    console.log(`${((new Date()).getTime() / 1000) - data.updates.qiwi_bot}`);
    console.log(`${((new Date()).getTime() / 1000) - data.updates.steam_bot}`);

    if(data.updates.qiwi_bot && ((new Date()).getTime() / 1000) - data.updates.qiwi_bot < ping_time) {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{service_id}","Footer_Services_QIWI"));
    }

    if(data.updates.steam_bot && ((new Date()).getTime() / 1000) - data.updates.steam_bot < ping_time) {
        document.getElementById("Footer_Text").insertAdjacentHTML("beforeend", text.replace("{service_id}","Footer_Services_STEAM"));
    }
}

function UNIX2TIMESTAMP(unix) {
    return (new Date((unix + 3600 * 3) * 1000)).toGMTString().replace("GMT", "MSK");
}

function FillCharacters() {
    let CharactersArray = new Array(
        ["site_content/images/characters/pootisd.png","site_content/sounds/pootis.mp3", ""],
        ["site_content/images/characters/pyro.png","site_content/sounds/alertmgs.mp3", ""],
        ["site_content/images/characters/toilet.png","site_content/sounds/puk.mp3", ""],
        ["site_content/images/characters/engi_n.png","site_content/sounds/nigger.mp3", ""],
        ["site_content/images/characters/mgesold.png","site_content/sounds/soldier_laughevil03.mp3", ""]
        );

    let InjectCharacter = ``;

    document.getElementById("Main_FunnyСharacters").insertAdjacentHTML("beforeend", `<div class="col-3"></div>`);
    for (const element in CharactersArray) {
        InjectCharacter = `<div class="col"><img class="img-fluid" src="${CharactersArray[element][0]}" onclick="(new Audio('${CharactersArray[element][1]}')).play();"></div>`;
        if(CharactersArray[element][2]){
            document.getElementById(CharactersArray[element][2]).insertAdjacentHTML("beforeend", `<div class="col-5"></div>`);
            document.getElementById(CharactersArray[element][2]).insertAdjacentHTML("beforeend", InjectCharacter);
            document.getElementById(CharactersArray[element][2]).insertAdjacentHTML("beforeend", `<div class="col-5"></div>`);
        }
        document.getElementById("Main_FunnyСharacters").insertAdjacentHTML("beforeend", InjectCharacter);
    }
    document.getElementById("Main_FunnyСharacters").insertAdjacentHTML("beforeend", `<div class="col-3"></div>`);
    
}

function FillRules() {
    const rules = new Array(
        {"name":"Читы", "about":"Бан навсегда сука", "image":"site_content/images/rules/cheats.jpg"},
        {"name":"Реклама серверов", "about":"Кроме мге, бан навсегда сука", "image":"site_content/images/rules/ads.jpg"},
        {"name":"Багоюз", "about":"Пиздец тебе, бан навсегда", "image":"site_content/images/rules/bug_use.jpg"},
        {"name":"Абуз команды !mir", "about":"Блокировка дверей, открытие спавна и т.д", "image":"site_content/images/rules/abuse.jpg"},
        {"name":"Абуз випки на сервере", "about":"Модеры сам решат как и за что", "image":"site_content/images/rules/abuse_vip.jpg"},
        {"name":"Делай короче чё хочешь", "about":":troll_face:", "image":"site_content/images/rules/make_everyone.jpg"}
        )

    let card = ``;
    //const shift = ``;//<div class="col-1 pb-4"></div>`;
    //let counter = 1


    for(const rule in rules) {
        //if(counter == 1){document.getElementById("Rules_List").insertAdjacentHTML("beforeend", shift);}
        card = `
        <div class="col-4 pb-4">
            <div class="card" style="height: 18rem; background-image: url('${rules[rule].image}'); background-size: cover;">
                <!--<img class="card-img" src="${rules[rule].image}" alt="читы">-->
                <div class="card-img-overlay d-flex flex-column" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.7));">
                    <div class="mt-auto" style="text-align: right;">
                        <h5 style="color: white;" >${rules[rule].name}</h5>
                        <hr style="color: white;">
                        <p style="font-family: tf2secondary; color: white;">${rules[rule].about}</p>
                    </div>
                </div>
            </div>
        </div>`
        document.getElementById("Rules_List").insertAdjacentHTML("beforeend", card);
        
        //counter++;
        //if(counter == 4){counter=1;}
    }
}