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

const MapsHandler = {

    maps: [],
    key: '',

    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?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: 11,
                center: map.location,
                disableDefaultUI: true,
                styles: map.styles
            });

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

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

        return [
                {
                    "featureType": "poi",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#747474"
                        },
                        {
                            "lightness": "23"
                        }
                    ]
                },
                {
                    "featureType": "poi.attraction",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#f38eb0"
                        }
                    ]
                },
                {
                    "featureType": "poi.government",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#ced7db"
                        }
                    ]
                },
                {
                    "featureType": "poi.medical",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#ffa5a8"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#c7e5c8"
                        }
                    ]
                },
                {
                    "featureType": "poi.place_of_worship",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#d6cbc7"
                        }
                    ]
                },
                {
                    "featureType": "poi.school",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#c4c9e8"
                        }
                    ]
                },
                {
                    "featureType": "poi.sports_complex",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#b1eaf1"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "lightness": "100"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels",
                    "stylers": [
                        {
                            "visibility": "off"
                        },
                        {
                            "lightness": "100"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#ffd4a5"
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#ffe9d2"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "all",
                    "stylers": [
                        {
                            "visibility": "simplified"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "weight": "3.00"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "weight": "0.30"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "labels.text",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#747474"
                        },
                        {
                            "lightness": "36"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#e9e5dc"
                        },
                        {
                            "lightness": "30"
                        }
                    ]
                },
                {
                    "featureType": "transit.line",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "visibility": "on"
                        },
                        {
                            "lightness": "100"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": [
                        {
                            "color": "#d2e7f7"
                        }
                    ]
                }
            ];
    }
};

MapsHandler.init();