let areaID = ["RS", "XK", "MK", "SI", "BA", "ME", "HR"];
let areaText = {
    RS: "<p>Selektujte Arenu u državi gde se trenutno nalazite i odaberite sportske događaje ili takmičenje koje smo pripremili za Vas danas. <a href='https://www.tvarenasport.com/tv-scheme' target='blank'>Pogledajte programsku šemu</a></p><p>Ju lutemi zgjidhni arenën në vendin tuaj aktual të banimit dhe zgjidhni ngjarjet sportive ose garat që kemi përgatitur për ju sot. <a href='https://www.tvarenasport.com/tv-scheme' target='blank'>Shikoni skemën e programit</a></p>",
    XK: "<p>Selektujte Arenu u državi gde se trenutno nalazite i odaberite sportske događaje ili takmičenje koje smo pripremili za Vas danas. <a href='https://www.tvarenasport.com/tv-scheme' target='blank'>Pogledajte programsku šemu</a></p><p>Ju lutemi zgjidhni arenën në vendin tuaj aktual të banimit dhe zgjidhni ngjarjet sportive ose garat që kemi përgatitur për ju sot. <a href='https://www.tvarenasport.com/tv-scheme' target='blank'>Shikoni skemën e programit</a></p>",
    MK: "<p>Ве молиме изберете ја Арената во вашата моментална земја на живеење и изберете ги спортските настани или натпревари што ги подготвивме за вас денес. <a href='https://www.tvarenasport.com/tv-scheme' target='blank'>Погледнете го програмскиот дијаграм</a></p>",
    SI: "<p>Izberite Areno v državi, kjer se trenutno nahajate in izberite športne dogodke ali tekmovanja, ki smo jih danes pripravili za vas. <a href='https://www.tvarenasport.si/tv-spored/' target='blank'>Oglejte si diagram programa</a></p>",
    BA: "<p>Odaberite Arenu u zemlji u kojoj trenutno boravite i odaberite sportske događaje ili takmičenja koja smo za Vas pripremili za danas. <a href='https://tvarenasport.ba/tv-scheme/' target='blank'>Pogledajte programsku šemu</a></p><p>Селектујте Арену у држави где се тренутно налазите и одаберите спортске догађаје или такмичења које смо припремили за Вас данас. <a href='https://tvarenasport.ba/tv-scheme/' target='blank'>Погледајте програмску шему</a></p><p>Izaberite Arenu u državi u kojoj trenutno boravite i odaberite sportske događaje ili natjecanja koja smo danas pripremili za Vas. <a href='https://tvarenasport.ba/tv-scheme/' target='blank'>Pogledajte programsku šemu</a></p>",
    ME: "<p>Selektujte Arenu u državi gde se trenutno nalazite i odaberite sportske događaje ili takmičenje koje smo pripremili za Vas danas. <a href='https://www.tvarenasport.com/tv-scheme' target='blank'>Pogledajte programsku šemu</a></p>",
    HR: "<p>Izaberite Arenu u državi u kojoj trenutno boravite i odaberite sportske događaje ili natjecanja koja smo danas pripremili za Vas. <a href='https://www.tvarenasport.hr/tv-scheme' target='blank '>Pogledajte programsku šemu</a></p>",
};

$(".map-inner-wrapper").mapael({
    map: {
        cssClass: "map",
        name: "european_union",
        // Set default plots and areas style
        defaultPlot: {
            attrs: {
                fill: "#004a9b",
                opacity: 0.6,
            },
            attrsHover: {
                opacity: 1,
            },
            text: {
                attrs: {
                    fill: "#505444",
                },
                attrsHover: {
                    fill: "#000",
                },
            },
        },
        defaultArea: {
            attrs: {
                // transform: "S0",
                fill: "#D9D9D9",
                stroke: "#fff",
            },
            attrsHover: {
                fill: "#D9D9D9",
            },
        },
    },
    areas: {
        SH: {
            attrs: {
                fill: "#fff",
                stroke: "transparent",
            },
        },
        SH2: {
            attrs: {
                fill: "#fff",
                stroke: "transparent",
            },
        },
        RS: {
            eventHandlers: {
                mouseover: function (e, id, mapElem, textElem, elemOptions) {
                    removeSiblingsColorAndText("HR");
                    removeSiblingsColorAndText("SI");
                    removeSiblingsColorAndText("BA");
                    removeSiblingsColorAndText("MK");
                    removeSiblingsColorAndText("ME");

                    function removeSiblingsColorAndText(id) {
                        $('path[data-id="RS"]')
                            .siblings(`path[data-id="${id}"]`)
                            .css({
                                fill: "#88A2B6",
                                transition: "0.5s linear",
                            });
                        $('text[data-id="RS"]')
                            .siblings(`text[data-id="${id}"]`)
                            .css({
                                opacity: "0",
                                transition: "0.5s linear",
                            });
                    }

                    $(".countryTextWrapper .country-text").html(areaText["XK"]);
                    $('text[data-id="RS"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="RS"]').css({
                        fill: "#00446C",
                        transition: "0.5s linear",
                    });
                    $('text[data-id="XK"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="XK"]').css({
                        fill: "#00446C",
                        stroke: "#fff",
                        transition: "0.5s linear",
                    });
                },
                mouseout: function (e, id, mapElem, textElem, elemOptions) {
                    $('text[data-id="RS"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="RS"]').css({
                        fill: "#88A2B6",
                        transition: "0.5s linear",
                    });
                    $('text[data-id="XK"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="XK"]').css({
                        fill: "#88A2B6",
                        stroke: "none",
                        transition: "0.5s linear",
                    });
                },
            },
            attrs: {
                stroke: "#fff",
                fill: "#88A2B6",
            },
            text: {
                content: "SERBIA",
                attrs: {
                    "font-size": 10,
                    "font-family": "Pluto Sans Cond Bold",
                },
            },
            href: "https://www.tvarenasport.com/tv-scheme",
        },
        ME: {
            eventHandlers: {
                mouseover: function (e, id, mapElem, textElem, elemOptions) {
                    removeSiblingsColorAndText("HR");
                    removeSiblingsColorAndText("SI");
                    removeSiblingsColorAndText("BA");
                    removeSiblingsColorAndText("MK");
                    removeSiblingsColorAndText("RS");
                    removeSiblingsColorAndText("XK");

                    function removeSiblingsColorAndText(id) {
                        $('path[data-id="ME"]')
                            .siblings(`path[data-id="${id}"]`)
                            .css({
                                fill: "#88A2B6",
                                transition: "0.5s linear",
                            });
                        $('text[data-id="ME"]')
                            .siblings(`text[data-id="${id}"]`)
                            .css({
                                opacity: "0",
                                transition: "0.5s linear",
                            });
                    }

                    $(".countryTextWrapper .country-text").html(areaText["ME"]);
                    $('text[data-id="ME"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="ME"]').css({
                        fill: "#00446C",
                        transition: "0.5s linear",
                    });
                },
                mouseout: function (e, id, mapElem, textElem, elemOptions) {
                    $('text[data-id="ME"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="ME"]').css({
                        fill: "#88A2B6",
                        transition: "0.5s linear",
                    });
                },
            },
            attrs: {
                stroke: "#fff",
                fill: "#88A2B6",
            },
            text: {
                content: "MNE",
                attrs: {
                    transform: "T-5,-1%",
                    "font-size": 10,
                    "font-family": "Pluto Sans Cond Bold",
                },
            },
            href: "https://www.tvarenasport.com/tv-scheme",
        },
        MK: {
            eventHandlers: {
                mouseover: function (e, id, mapElem, textElem, elemOptions) {
                    removeSiblingsColorAndText("HR");
                    removeSiblingsColorAndText("SI");
                    removeSiblingsColorAndText("BA");
                    removeSiblingsColorAndText("ME");
                    removeSiblingsColorAndText("RS");
                    removeSiblingsColorAndText("XK");

                    function removeSiblingsColorAndText(id) {
                        $('path[data-id="MK"]')
                            .siblings(`path[data-id="${id}"]`)
                            .css({
                                fill: "#88A2B6",
                                transition: "0.5s linear",
                            });
                        $('text[data-id="MK"]')
                            .siblings(`text[data-id="${id}"]`)
                            .css({
                                opacity: "0",
                                transition: "0.5s linear",
                            });
                    }
                    $(".countryTextWrapper .country-text").html(areaText["MK"]);
                    $('text[data-id="MK"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="MK"]').css({
                        fill: "#00446C",
                        transition: "0.5s linear",
                    });
                },
                mouseout: function (e, id, mapElem, textElem, elemOptions) {
                    $('text[data-id="MK"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="MK"]').css({
                        fill: "#88A2B6",
                        transition: "0.5s linear",
                    });
                },
            },
            attrs: {
                stroke: "#fff",
                fill: "#88A2B6",
            },
            text: {
                content: "NMK",
                attrs: {
                    "font-size": 10,
                    "font-family": "Pluto Sans Cond Bold",
                },
            },
            href: "https://www.tvarenasport.com/tv-scheme",
        },
        XK: {
            eventHandlers: {
                mouseover: function (e, id, mapElem, textElem, elemOptions) {
                    removeSiblingsColorAndText("HR");
                    removeSiblingsColorAndText("SI");
                    removeSiblingsColorAndText("BA");
                    removeSiblingsColorAndText("MK");
                    removeSiblingsColorAndText("ME");

                    function removeSiblingsColorAndText(id) {
                        $('path[data-id="RS"]')
                            .siblings(`path[data-id="${id}"]`)
                            .css({
                                fill: "#88A2B6",
                                transition: "0.5s linear",
                            });
                        $('text[data-id="RS"]')
                            .siblings(`text[data-id="${id}"]`)
                            .css({
                                opacity: "0",
                                transition: "0.5s linear",
                            });
                    }
                    $(".countryTextWrapper .country-text").html(areaText["XK"]);
                    $('text[data-id="RS"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="RS"]').css({
                        fill: "#00446C",
                        transition: "0.5s linear",
                    });
                    $('text[data-id="XK"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="XK"]').css({
                        fill: "#00446C",
                        stroke: "#fff",
                        transition: "0.5s linear",
                    });
                },
                mouseout: function (e, id, mapElem, textElem, elemOptions) {
                    $('text[data-id="RS"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="RS"]').css({
                        fill: "#88A2B6",
                        transition: "0.5s linear",
                    });
                    $('text[data-id="XK"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="XK"]').css({
                        fill: "#88A2B6",
                        stroke: "none",
                        transition: "0.5s linear",
                    });
                },
            },
            attrs: {
                fill: "#88A2B6",
                stroke: "none",
                "stroke-dasharray": "-",
            },
            text: {
                content: "KiM*",
                attrs: {
                    "font-size": 10,
                    "font-family": "Pluto Sans Cond Bold",
                },
            },
            href: "https://www.tvarenasport.com/tv-scheme",
        },
        BA: {
            eventHandlers: {
                mouseover: function (e, id, mapElem, textElem, elemOptions) {
                    removeSiblingsColorAndText("HR");
                    removeSiblingsColorAndText("SI");
                    removeSiblingsColorAndText("ME");
                    removeSiblingsColorAndText("MK");
                    removeSiblingsColorAndText("RS");
                    removeSiblingsColorAndText("XK");

                    function removeSiblingsColorAndText(id) {
                        $('path[data-id="BA"]')
                            .siblings(`path[data-id="${id}"]`)
                            .css({
                                fill: "#88A2B6",
                                transition: "0.5s linear",
                            });
                        $('text[data-id="BA"]')
                            .siblings(`text[data-id="${id}"]`)
                            .css({
                                opacity: "0",
                                transition: "0.5s linear",
                            });
                    }
                    $(".countryTextWrapper .country-text").html(areaText["BA"]);
                    $('text[data-id="BA"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="BA"]').css({
                        fill: "#00446C",
                        transition: "0.5s linear",
                    });
                },
                mouseout: function (e, id, mapElem, textElem, elemOptions) {
                    $('text[data-id="BA"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="BA"]').css({
                        fill: "#88A2B6",
                        transition: "0.5s linear",
                    });
                },
            },
            attrs: {
                stroke: "#fff",
                fill: "#88A2B6",
            },
            // attrsHover: {
            //         fill: "#00446C",
            // },
            text: {
                content: "BIH",
                attrs: {
                    transform: "T6,-5%",
                    "font-size": 10,
                    "font-family": "Pluto Sans Cond Bold",
                },
            },
            href: "https://tvarenasport.ba/tv-scheme/",
            // countryTextWrapper: "<p>Odaberite Arenu u zemlji u kojoj trenutno boravite i odaberite sportske događaje ili takmičenja koja smo za Vas pripremili za danas. <a href='https://tvarenasport.ba/tv-scheme/' target='blank'>Pogledajte programsku šemu</a></p><p>Селектујте Арену у држави где се тренутно налазите и одаберите спортске догађаје или такмичења које смо припремили за Вас данас. <a href='https://tvarenasport.ba/tv-scheme/' target='blank'>Погледајте програмску шему</a></p><p>Izaberite Arenu u državi u kojoj trenutno boravite i odaberite sportske događaje ili natjecanja koja smo danas pripremili za Vas. <a href='https://tvarenasport.ba/tv-scheme/' target='blank'>Pogledajte programsku šemu</a></p>",
        },
        SI: {
            eventHandlers: {
                mouseover: function (e, id, mapElem, textElem, elemOptions) {
                    removeSiblingsColorAndText("HR");
                    removeSiblingsColorAndText("ME");
                    removeSiblingsColorAndText("BA");
                    removeSiblingsColorAndText("MK");
                    removeSiblingsColorAndText("RS");
                    removeSiblingsColorAndText("XK");

                    function removeSiblingsColorAndText(id) {
                        $('path[data-id="SI"]')
                            .siblings(`path[data-id="${id}"]`)
                            .css({
                                fill: "#88A2B6",
                                transition: "0.5s linear",
                            });
                        $('text[data-id="SI"]')
                            .siblings(`text[data-id="${id}"]`)
                            .css({
                                opacity: "0",
                                transition: "0.5s linear",
                            });
                    }
                    $(".countryTextWrapper .country-text").html(areaText["SI"]);
                    $('text[data-id="SI"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="SI"]').css({
                        fill: "#00446C",
                        transition: "0.5s linear",
                    });
                },
                mouseout: function (e, id, mapElem, textElem, elemOptions) {
                    $('text[data-id="SI"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="SI"]').css({
                        fill: "#88A2B6",
                        transition: "0.5s linear",
                    });
                },
            },
            attrs: {
                stroke: "#fff",
                fill: "#88A2B6",
            },
            text: {
                content: "SLO",
                attrs: {
                    transform: "T-5,3%",
                    "font-size": 10,
                    "font-family": "Pluto Sans Cond Bold",
                },
            },
            href: "https://www.tvarenasport.si/tv-spored/",
        },
        HR: {
            eventHandlers: {
                mouseover: function (e, id, mapElem, textElem, elemOptions) {
                    removeSiblingsColorAndText("ME");
                    removeSiblingsColorAndText("SI");
                    removeSiblingsColorAndText("BA");
                    removeSiblingsColorAndText("MK");
                    removeSiblingsColorAndText("RS");
                    removeSiblingsColorAndText("XK");

                    function removeSiblingsColorAndText(id) {
                        $('path[data-id="HR"]')
                            .siblings(`path[data-id="${id}"]`)
                            .css({
                                fill: "#88A2B6",
                                transition: "0.5s linear",
                            });
                        $('text[data-id="HR"]')
                            .siblings(`text[data-id="${id}"]`)
                            .css({
                                opacity: "0",
                                transition: "0.5s linear",
                            });
                    }
                    $(".countryTextWrapper .country-text").html(areaText["HR"]);
                    $('text[data-id="HR"]').css({
                        opacity: "1",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="HR"]').css({
                        fill: "#00446C",
                        transition: "0.5s linear",
                    });
                },
                mouseout: function (e, id, mapElem, textElem, elemOptions) {
                    $('text[data-id="HR"]').css({
                        opacity: "0",
                        transition: "0.5s linear",
                    });
                    $('path[data-id="HR"]').css({
                        fill: "#88A2B6",
                        transition: "0.5s linear",
                    });
                },
            },
            attrs: {
                stroke: "#fff",
                fill: "#88A2B6",
            },
            text: {
                content: "CRO",
                attrs: {
                    transform: "T0,-25%",
                    "font-size": 10,
                    "font-family": "Pluto Sans Cond Bold",
                },
            },
            href: "https://www.tvarenasport.hr/tv-scheme",
        },
    },
});
let counter = 0;
// setTimeout(function() {
//         var paths = $('.map-inner-wrapper').find('path');
//         console.log(paths);
//         paths.each(function(index) {
//                 counter++;
//                 $(this).delay(index * 200).animate({
//                         opacity: 1
//                 }, 500);
//         });
// }, 1200);
setTimeout(function () {
    var paths = $(".map-inner-wrapper").find("path");
    var batchSize = 3;
    var totalBatches = Math.ceil(paths.length / batchSize);

    for (var i = 0; i < totalBatches; i++) {
        setTimeout(
            function (index) {
                paths
                    .slice(index * batchSize, (index + 1) * batchSize)
                    .each(function (index) {
                        $(this)
                            .delay(index * 400)
                            .css({
                                transform: "scale(1)",
                            });
                    });
            },
            i * 1000,
            i
        );
    }
}, 1200);
let intervalId; // variable to store interval ID
let hoveredCountryId; // variable to store the data-id attribute of the hovered path

function getRandomCountry() {
    if (areaID.length === 0) {
        // If all countries have been visited, reset the areaID array
        areaID = ["RS", "XK", "MK", "SI", "BA", "ME", "HR"];
    }
    // Pick a random index from the areaID array
    $(
        `.map path[data-id='RS'],.map path[data-id='XK'],.map path[data-id='MK'],.map path[data-id='SI'],.map path[data-id='BA'],.map path[data-id='ME'], .map path[data-id='HR']`
    ).css({
        fill: "#88A2B6",
        transition: "0.5s linear",
    });
    $(
        `.map text[data-id='RS'], .map text[data-id='XK'],.map text[data-id='MK'],.map text[data-id='SI'],.map text[data-id='BA'],.map text[data-id='ME'], .map text[data-id='HR']`
    ).css({
        opacity: 0,
        transition: "0.5s linear",
    });
    const randomIndex = Math.floor(Math.random() * areaID.length);
    const randomID = areaID[randomIndex];
    // Toggle color between "#88A2B6" and "#00446C"
    let color =
        $(`.map path[data-id='${randomID}']`).css("fill") ===
        "rgb(136, 162, 182)"
            ? "#00446C"
            : "#88A2B6";
    $(".country-text").html(areaText[randomID]);
    if (randomID == "RS") {
        $(`.map path[data-id='${randomID}'],.map path[data-id='XK'] `).css({
            fill: color,
            transition: "0.5s linear",
            stroke: "#fff",
        });
    } else if (randomID == "XK") {
        $(`.map path[data-id='${randomID}'],.map path[data-id='RS'] `).css({
            fill: color,
            transition: "0.5s linear",
        });
        $(`.map path[data-id='XK'] `).css({
            transition: "0.5s linear",
            stroke: "#fff",
        });
    } else {
        $(`.map path[data-id='${randomID}']`).css({
            fill: color,
            transition: "0.5s linear",
        });
        $(`.map path[data-id='XK'] `).css({
            transition: "0.5s linear",
            stroke: "none",
        });
    }
    // Toggle opacity between 0 and 1
    let opacity =
        1 - parseFloat($(`.map text[data-id='${randomID}']`).css("opacity"));
    if (randomID == "RS") {
        $(`.map text[data-id='${randomID}'],.map text[data-id='XK'] `).css({
            opacity: opacity,
            transition: "0.5s linear",
        });
    } else if (randomID == "XK") {
        $(`.map text[data-id='${randomID}'],.map text[data-id='RS'] `).css({
            opacity: opacity,
            transition: "0.5s linear",
        });
    } else {
        $(`.map text[data-id='${randomID}']`).css({
            opacity: opacity,
            transition: "0.5s linear",
        });
    }
    // Remove the selected country from the areaID array
    areaID.splice(randomIndex, 1);
}

// function stopRandomCountryInterval() {
//         clearInterval(intervalId); // Stop the interval
// }

function startRandomCountryInterval() {
    intervalId = setInterval(getRandomCountry, 5000); // Start the interval again
}

// Run the getRandomCountry function every 2 seconds initially
startRandomCountryInterval();

// Event handlers to stop and start the interval when mouse enters and leaves the map
// setTimeout(()=>{
//         $('.map').mouseenter(function() {
//                 stopRandomCountryInterval(); // Stop the interval when mouse enters the map
//         }).mouseleave(function() {
//                 startRandomCountryInterval(); // Start the interval again when mouse leaves the map
//         });
// },5000)