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

const MapsHandler = {

    map: '',
    key: 'AIzaSyB9TeatugNhhgkvNmIPcMr8X7CI_s3tEJ8',
    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)) {

            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: 13,
            center: MapsHandler.location,
            disableDefaultUI: true,
            styles: MapsHandler.styling
        });

        const icon = [
            '<?xml version="1.0"?>',
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.52 60">',
            '<defs><style>.cls-1{fill:#699BFF;}</style></defs>',
            '<title>maps_marker</title>',
            '<g id="Layer_2" data-name="Layer 2"><g id="Background">',
            '<path class="cls-1" d="M0,21.56A22,22,0,0,1,16.27.74,21.75,21.75,0,0,1,43.16,17.65a23.71,23.71,0,0,1-1.24,12.48A66.92,66.92,0,0,1,35.1,43.61,131.49,131.49,0,0,1,23.24,59.35a1.83,1.83,0,0,1-2.62.18,34.87,34.87,0,0,1-2.57-2.87A114.16,114.16,0,0,1,5.16,37.87,43.1,43.1,0,0,1,.6,26C.31,24.55.19,23.05,0,21.56Zm10.91.12A10.92,10.92,0,1,0,21.44,10.8,10.92,10.92,0,0,0,10.91,21.68Z"/>',
            '</g></g>',
            '</svg>'
        ].join('\n');

        // Add a marker
        const marker = new google.maps.Marker({
            position: MapsHandler.location,
            map: map,
            icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(icon), scaledSize: new google.maps.Size(60, 60) },
        });
    },

    setCustomStyling: function () {

        MapsHandler.styling =
            [
                {
                    "featureType": "administrative.locality",
                    "elementType": "all",
                    "stylers": [
                        {
                            "hue": "#2c2e33"
                        },
                        {
                            "saturation": 7
                        },
                        {
                            "lightness": 19
                        },
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "administrative.locality",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "hue": "#ff0000"
                        }
                    ]
                },
                {
                    "featureType": "administrative.locality",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#447abe"
                        }
                    ]
                },
                {
                    "featureType": "administrative.neighborhood",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#142c45"
                        },
                        {
                            "lightness": "65"
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [
                        {
                            "hue": "#ffffff"
                        },
                        {
                            "saturation": -100
                        },
                        {
                            "lightness": 100
                        },
                        {
                            "visibility": "simplified"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": [
                        {
                            "hue": "#ffffff"
                        },
                        {
                            "saturation": -100
                        },
                        {
                            "lightness": 100
                        },
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "hue": "#bbc0c4"
                        },
                        {
                            "saturation": -93
                        },
                        {
                            "lightness": 31
                        },
                        {
                            "visibility": "simplified"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels",
                    "stylers": [
                        {
                            "hue": "#bbc0c4"
                        },
                        {
                            "saturation": -93
                        },
                        {
                            "lightness": 31
                        },
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "labels",
                    "stylers": [
                        {
                            "hue": "#bbc0c4"
                        },
                        {
                            "saturation": -93
                        },
                        {
                            "lightness": -2
                        },
                        {
                            "visibility": "simplified"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "hue": "#e9ebed"
                        },
                        {
                            "saturation": -90
                        },
                        {
                            "lightness": -8
                        },
                        {
                            "visibility": "simplified"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "all",
                    "stylers": [
                        {
                            "hue": "#e9ebed"
                        },
                        {
                            "saturation": 10
                        },
                        {
                            "lightness": 69
                        },
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": [
                        {
                            "hue": "#e9ebed"
                        },
                        {
                            "saturation": -78
                        },
                        {
                            "lightness": 67
                        },
                        {
                            "visibility": "simplified"
                        }
                    ]
                }
            ];
    }
};

MapsHandler.init();