const WorldMapHandler = {

    worldMap: null,
    visitedCountries: null,
    marker: null,
    timeoutFunction: null,

    init: function () {
        WorldMapHandler.worldMap = document.querySelector('.js-world-map');
        WorldMapHandler.marker = document.querySelector('.js-world-map-marker');
        WorldMapHandler.visitedCountries = document.querySelectorAll('.js-world-map-items li');

        if(!isset(WorldMapHandler.worldMap) || !isset(WorldMapHandler.visitedCountries)) return;

        WorldMapHandler.worldMap.addEventListener('mousemove', function (e) {
            WorldMapHandler.marker.style.top = e.clientY + 'px';
            WorldMapHandler.marker.style.left = e.clientX + 'px';
        });

        const visitedCountriesLength = WorldMapHandler.visitedCountries.length;
        for(let i = 0; i < visitedCountriesLength; i++){
            const visitedCountry = WorldMapHandler.visitedCountries[i];

            const iso = visitedCountry.getAttribute('data-iso');
            const svgNode = WorldMapHandler.worldMap.querySelector('#' + iso);
            if(isset(svgNode)) WorldMapHandler.initEventListeners(svgNode, visitedCountry);
        }
    },

    initEventListeners: function (svgNode, visitedCountry) {

        svgNode.addEventListener('mouseenter', function () {
            const visitedCountry = document.querySelector('.js-world-map-items li[data-iso="' + this.id + '"]')
            const visitedCountryName = visitedCountry.getAttribute('data-name');

            if(WorldMapHandler.marker.getAttribute('data-name') !== visitedCountryName) {
                WorldMapHandler.marker.setAttribute('data-name', visitedCountryName);
                WorldMapHandler.marker.classList.remove('fade-out');
                clearTimeout(WorldMapHandler.timeoutFunction);
            }
        });

        svgNode.addEventListener('mouseleave', function () {
            const visitedCountry = document.querySelector('.js-world-map-items li[data-iso="' + this.id + '"]')
            const visitedCountryName = visitedCountry.getAttribute('data-name');

            if(WorldMapHandler.marker.getAttribute('data-name') === visitedCountryName) {
                WorldMapHandler.marker.classList.add('fade-out');
                WorldMapHandler.timeoutFunction = setTimeout(function () {
                    WorldMapHandler.marker.setAttribute('data-name', '');
                    WorldMapHandler.marker.classList.remove('fade-out');
                }, 300);
            }
        });

        if(visitedCountry.getAttribute('data-href') !== null) {
            svgNode.classList.add('clickable');
            svgNode.addEventListener('click', function () {
                window.location = visitedCountry.getAttribute('data-href');
            });
        }
    },

    clearMarker: function () {
        WorldMapHandler.marker.setAttribute('data-name', '');
        WorldMapHandler.marker.classList.remove('fade-out');
        WorldMapHandler.marker.classList.remove('is-clickable');
    }

};

WorldMapHandler.init();