/* ==========================================================================
    Google Maps handler
    - https://developers.google.com/maps/documentation/javascript/adding-a-google-map
 ========================================================================== */

export const MapsHandler = {

    map: '',
    key: 'AIzaSyBbqF_8gcFAkSYusr2dxHWwdKWDUjebCM0',
    location: {lat: 51.2618222, lng: 5.5965538},
    styling: '',

    init: function () {
        // Get map by id
        MapsHandler.map = document.getElementById('map');

        // Check if a map is defined
        if (isset(MapsHandler.map)) {

            //create height of element
            var mapWidth = window.getComputedStyle(MapsHandler.map).width;
            mapWidth = parseInt(mapWidth.slice(0, -2));
            let mapHeight = mapWidth / 2;
            if (mapHeight < 350) mapHeight = 350;
            if (mapHeight > 400) mapHeight = 400;
            MapsHandler.map.style.height = mapHeight + 'px';

            if (MapsHandler.map.hasAttribute('data-google-lat')) MapsHandler.location.lat = parseFloat(MapsHandler.map.getAttribute('data-google-lat'));
            if (MapsHandler.map.hasAttribute('data-google-lng')) MapsHandler.location.lng = parseFloat(MapsHandler.map.getAttribute('data-google-lng'));

            MapsHandler.setCustomStyling();

            // See if google variable exists
            if (typeof (google) == 'undefined' || typeof (google.maps) == 'undefined') {
                // Load external script
                getScript('https://maps.googleapis.com/maps/api/js?key=' + MapsHandler.key, MapsHandler.drawMap);
            } else {
                MapsHandler.drawMap()
            }

        }
    },

    drawMap: function () {
        // Create a map
        const map = new google.maps.Map(MapsHandler.map, {
            zoom: 14,
            center: MapsHandler.location,
            disableDefaultUI: true,
            styles: MapsHandler.styling
        });
        // Add a marker
        const marker = new google.maps.Marker({
            position: MapsHandler.location,
            map: map,
            icon: '/img/googleMapsMarker.png'
        });
    },

    setCustomStyling: function () {

        MapsHandler.styling = [
            {
                "featureType": "landscape",
                "elementType": "all",
                "stylers": [
                    {
                        "hue": "#FFBB00"
                    },
                    {
                        "saturation": 43.400000000000006
                    },
                    {
                        "lightness": 37.599999999999994
                    },
                    {
                        "gamma": 1
                    }
                ]
            },
            {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [
                    {
                        "saturation": -1.0989010989011234
                    },
                    {
                        "lightness": 11.200000000000017
                    },
                    {
                        "gamma": 1
                    },
                    {
                        "visibility": "on"
                    }
                ]
            },
            {
                "featureType": "road.highway",
                "elementType": "all",
                "stylers": [
                    {
                        "hue": "#FFC200"
                    },
                    {
                        "saturation": -61.8
                    },
                    {
                        "lightness": 45.599999999999994
                    },
                    {
                        "gamma": 1
                    }
                ]
            },
            {
                "featureType": "road.arterial",
                "elementType": "all",
                "stylers": [
                    {
                        "hue": "#FF0300"
                    },
                    {
                        "saturation": -100
                    },
                    {
                        "lightness": 51.19999999999999
                    },
                    {
                        "gamma": 1
                    }
                ]
            },
            {
                "featureType": "road.local",
                "elementType": "all",
                "stylers": [
                    {
                        "hue": "#FF0300"
                    },
                    {
                        "saturation": -100
                    },
                    {
                        "lightness": 52
                    },
                    {
                        "gamma": 1
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "all",
                "stylers": [
                    {
                        "hue": "#0078FF"
                    },
                    {
                        "saturation": -13.200000000000003
                    },
                    {
                        "lightness": 2.4000000000000057
                    },
                    {
                        "gamma": 1
                    }
                ]
            }
        ];
    }
};