(function () {
    'use strict';

    let mapsInitialized = false;

    /**
     * initMap
     *
     * Renders a Google Map onto the selected DOM element
     *
     * @param   HTMLElement el The DOM element.
     * @return  object The map instance.
     */
    function initMap(el) {

        // Find marker elements within map.
        var markers = el.querySelectorAll('.marker');

        // Create generic map.
        var mapArgs = {
            zoom: el.dataset.zoom ? parseInt(el.dataset.zoom, 10) : 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [
                {
                    featureType: "poi.business",
                    stylers: [{ visibility: "off" }]
                },
                {
                    featureType: "transit",
                    elementType: "labels.icon",
                    stylers: [{ visibility: "off" }]
                }
            ]
        };
        var map = new google.maps.Map(el, mapArgs);

        // Add markers.
        map.markers = [];
        markers.forEach(function (markerEl) {
            initMarker(markerEl, map);
        });

        // Center map based on markers.
        centerMap(map);

        // Return map instance.
        return map;
    }

    /**
     * initMarker
     *
     * Creates a marker for the given DOM element and map.
     *
     * @param   HTMLElement markerEl The DOM element.
     * @param   object map The map instance.
     * @return  object The marker instance.
     */
    function initMarker(markerEl, map) {
        // Get position from marker.
        var lat = markerEl.dataset.lat;
        var lng = markerEl.dataset.lng;
        var latLng = {
            lat: parseFloat(lat),
            lng: parseFloat(lng)
        };

        // Create marker instance.
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });

        // Append to reference for later use.
        map.markers.push(marker);

        // If marker contains HTML, add it to an infoWindow.
        if (markerEl.innerHTML) {
            // Create info window.
            var infowindow = new google.maps.InfoWindow({
                content: markerEl.innerHTML
            });

            // Show info window when marker is clicked.
            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        }
    }

    /**
     * centerMap
     *
     * Centers the map showing all markers in view.
     *
     * @param   object map The map instance.
     * @return  void
     */
    function centerMap(map) {
        // Create map boundaries from all map markers.
        var bounds = new google.maps.LatLngBounds();
        map.markers.forEach(function (marker) {
            bounds.extend({
                lat: marker.position.lat(),
                lng: marker.position.lng()
            });
        });

        // Case: Single marker.
        if (map.markers.length === 1) {
            map.setCenter(bounds.getCenter());
        } else {
            // Case: Multiple markers.
            map.fitBounds(bounds);
        }
    }

    /**
     * initializeMaps
     *
     * Initializes the maps.
     *
     * @return  void
     */
    function initializeMaps() {
        // If maps are already initialized, return.
        if (mapsInitialized) {
            return;
        }

        console.log('[Cirrus] initializeMaps');

        // Initialize maps.
        document
            .querySelectorAll('.acf-map')
            .forEach(
                function (mapEl) {
                    initMap(mapEl);
                }
        );

        // Set mapsInitialized to true.
        mapsInitialized = true;
    }

    // Initialize maps when Google Maps API is loaded
    window.initACFGoogleMaps = function () {
        console.log('[Cirrus] initACFGoogleMaps');
        console.log(document.readyState);
        // If DOM is already loaded, initialize maps.   
        if ( document.readyState === "complete") {
            console.log('[Cirrus] DOMContentLoaded already fired');
            initializeMaps();
        } else if (document.readyState === "interactive") {
            // When the DOM is interactive, it seems that registering the event listener to fire on DOMContentLoaded doesn't work.
            // So we use a timeout to fire the initializeMaps function after the DOM is interactive.
            console.log('[Cirrus] DOMContentLoaded about to fire');
            setTimeout(function() {
                console.log('[Cirrus] Fired on timeout');
                initializeMaps();
            }, 100);
        } else {
            console.log('[Cirrus] DOMContentLoaded not fired yet');
            // If DOM is not loaded, wait for it to load.
            document.addEventListener('DOMContentLoaded', function() {
                console.log('[Cirrus] DOMContentLoaded fired');
                initializeMaps();
            });
        }
    };

    console.log('[Cirrus] Google Maps API loaded');

})();