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

const MapsHandler = {

    maps: [],
    key: 'AIzaSyCVGPUmRmQRxXvzzWu3Xyu77XebQxQ-f4Y',

    init: function () {
        // Get map elements
        const maps = document.querySelectorAll('.js-google-map');

        // If there are map elements loop through them and draw the maps
        if(maps.length !== 0 ) {

            // Convert elements into object for callback when script as been loaded
            for(let i = 0; i < maps.length; i++) {

                // Get map from nodeList
                const map = maps[i];

                if(!map.hasAttribute('data-google-lat') || !map.hasAttribute('data-google-lng')) continue;

                let lat = parseFloat(map.getAttribute('data-google-lat'));
                let lng = parseFloat(map.getAttribute('data-google-lng'));

                MapsHandler.maps.push({
                    node: map,
                    location: {
                        lat: lat,
                        lng: lng,
                    },
                    styles: MapsHandler.setCustomStyling()
                });
            }

            // See if google variable exists
            if (typeof(google) == 'undefined' || typeof(google.maps) == 'undefined') {
                // Load external script with drawMaps callback
                getScript('https://maps.googleapis.com/maps/api/js?v=quarterly&key=' + MapsHandler.key, MapsHandler.drawMaps);
            } else {
                // If already loaded draw maps
                MapsHandler.drawMaps()
            }
        }
    },

    /**
     * Draw the google maps
     */
    drawMaps: function () {

        for (let i = 0; i < MapsHandler.maps.length; i++)  {

            const map = MapsHandler.maps[i];

            // Create a map
            const googleMap = new google.maps.Map(map.node, {
                zoom: 14,
                center: map.location,
                disableDefaultUI: true,
                styles: map.styles
            });

            // Add a marker
            const marker = new google.maps.Marker({
                position: map.location,
                map: googleMap,
                icon: '/img/google-maps-marker.png'
            });
        }
    },

    /**
     * Set the custom styling for the Google Maps
     *
     * @returns {*[]}
     */
    setCustomStyling: function () {

        return [
            {
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#f5f5f5"
                    }
                ]
            },
            {
                "elementType": "labels.icon",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#616161"
                    }
                ]
            },
            {
                "elementType": "labels.text.stroke",
                "stylers": [
                    {
                        "color": "#f5f5f5"
                    }
                ]
            },
            {
                "featureType": "administrative.land_parcel",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#bdbdbd"
                    }
                ]
            },
            {
                "featureType": "poi",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#eeeeee"
                    }
                ]
            },
            {
                "featureType": "poi",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#757575"
                    }
                ]
            },
            {
                "featureType": "poi.park",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#e5e5e5"
                    }
                ]
            },
            {
                "featureType": "poi.park",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#9e9e9e"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#ffffff"
                    }
                ]
            },
            {
                "featureType": "road.arterial",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#757575"
                    }
                ]
            },
            {
                "featureType": "road.highway",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#dadada"
                    }
                ]
            },
            {
                "featureType": "road.highway",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#616161"
                    }
                ]
            },
            {
                "featureType": "road.local",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#9e9e9e"
                    }
                ]
            },
            {
                "featureType": "transit.line",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#e5e5e5"
                    }
                ]
            },
            {
                "featureType": "transit.station",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#eeeeee"
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#c9c9c9"
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#9e9e9e"
                    }
                ]
            }
        ];
    }
};

MapsHandler.init();