const colors = ["#8f8389","#e0a100","#00AFF5","#f25cd7","#5ce8f2"]
        const transcolors = ["rgba(143, 131, 137,.25)", "rgba(224, 161, 0,0.25)", "rgba(0, 175, 245,0.25)"]
        function init_map(map) {
            const corner1 = [37.866964, -88.606680];
            const corner2 = [35.735020, -86.061297];
            const apiKey = "AAPKf3b50bc234014cb6a6a75347af8db0d2LIJ5XSQAYjsxBuxdmWT74QSa-BJBv0YtkdbUHv_MAqpXUIuTSH5VW5fD1wWgEsKi";
            const basemapEnum = "ArcGIS:LightGray";
            const polygons = [];
            map.options.minZoom = 10;
            map.options.maxZoom = 16;

            map.createPane('pane0');
            map.getPane('pane0').style.zIndex = 1100;
            map.getPane('pane0').style.pointerEvents = 'none';

            map.createPane('pane1');
            map.getPane('pane1').style.zIndex = 1101;
            map.getPane('pane1').style.pointerEvents = 'none';

            map.createPane('pane2');
            map.getPane('pane2').style.zIndex = 1102;
            map.getPane('pane2').style.pointerEvents = 'none';

            map.createPane('mkPane');
            map.getPane('mkPane').style.zIndex = 1103;
            map.getPane('mkPane').style.pointerEvents = 'none';

            map.createPane('ttPane');
            map.getPane('ttPane').style.zIndex = 1104;
            map.getPane('ttPane').style.pointerEvents = 'none';

            
            L.esri.Vector.vectorBasemapLayer(basemapEnum, {
                apiKey: apiKey,
            }).addTo(map);
            
            fetch("https://goenergynet.com" + "/home/mapAreas/0")
            .then(function(response) {
                return response.json();
            }).then(function(data0) {
                renderGeoJson(data0, "pane0", map);
            }).catch(error => { console.log(error)});
            
            fetch("https://goenergynet.com" + "/home/mapAreas/1")
            .then(function(response) {
                return response.json();
            }).then(function(data1) {
                renderGeoJson(data1, "pane1", map);
            }).catch(error => {console.log(error)});

            fetch("https://goenergynet.com" + "/home/mapAreas/2")
            .then(function(response) {
                return response.json();
            }).then(function(data2) {
                renderGeoJson(data2, "pane2", map);
            }).catch(error => {console.log(error)});
            L.esri.Vector.vectorBasemapLayer(basemapEnum, {
                apiKey: apiKey,
            }).addTo(map);

            // var search = L.esri.BootstrapGeocoder.search({
            //     inputTag: 'address-search',
            //     weapperStyle: 'uk-dropdown',
            //     placeholder: 'Address Search',
            //     useMapBounds: false,
            //     searchBounds: [corner1,corner2],
            //     providers: [L.esri.Geocoding.arcgisOnlineProvider({
            //         apikey: apiKey,
            //         nearby: {
            //         lat: 36.8656,
            //         lng: -87.4886
            //         },
            //     })]
            // }).addTo(map);
            
            // const results = L.layerGroup().addTo(map);
            
            // search.on("results", async (data) => {
            //     results.clearLayers();
            //     for (let i = data.results.length - 1; i >= 0; i--) {
            //         const marker = L.marker(data.results[i].latlng);
            //         let point = turf.point([+data.results[i].latlng.lng, +data.results[i].latlng.lat]);
            //         let available = false;
            //         let address = data.text;
            //         location.href = 'https://goenergynet.com/home/map/location?addr='+ encodeURIComponent(address);
            //     }
                
            // });
        }
        (function() {
            var map = L.map('map',{
                zoomControl: false,
            }).setView([36.8656, -87.4886],10);
            init_map(map);
        })();

        function initGoogleSearch(){
            service = new google.maps.places.AutocompleteService();
            geocoder = new google.maps.Geocoder();

            searchBox = document.getElementById('full-search')
            
            autocomplete(searchBox, service, geocoder);

        }

        function autocomplete(searchBoxInput, googleService, googleGeocoder) {

            var currentRow;

            searchBoxInput.addEventListener("input", function(e) { // This captures the text and processes it
                var thisDiv, resultDiv, i, val = this.value;
                
                closeAllLists();
                if (!val) { return false;}
                currentRow = -1;

                thisDiv = document.createElement("DIV");
                thisDiv.setAttribute("id", this.id + "autocomplete-list");
                thisDiv.setAttribute("class", "autocomplete-items");

                this.parentNode.appendChild(thisDiv);

                let googleSearchResults = (( predictions, status ) => {
                    if(!predictions || status != "OK") {
                        console.log(status)
                        return false;
                    }

                    thisDiv.innerHTML = "";

                    predictions.forEach((prediction) => {
                        resultDiv = document.createElement("DIV");
                        
                        resultDiv.innerHTML = "<strong>" + prediction.description.toUpperCase() + "</strong>";
                        

                        resultDiv.innerHTML += "<input type='hidden' value='" + prediction.description.toUpperCase() + "'>";

                        resultDiv.addEventListener("click", function(e) {

                            searchBoxInput.value = this.getElementsByTagName("input")[0].value;
                            googleGeocoder.geocode({
                                'address': this.getElementsByTagName("input")[0].value,
                            },
                            (results, status) => {
                                if(status != 'OK') {
                                    console.log(status);
                                    return false;
                                }
                                
                                location.href = 'https://goenergynet.com/home/map/location/'+ encodeURIComponent(this.getElementsByTagName("input")[0].value);
                            }
                            )
                            closeAllLists();
                        });

                        thisDiv.appendChild(resultDiv);
                    });
                });

                let manualSearchResults = (( results, status ) => {
                    if(!results || status != "OK") {
                        console.log(status)
                        return false;
                    }

                    results.forEach((result) => {
                        resultDiv = document.createElement("DIV");
                        let formatted_address = result.street_number + " " + result.street_name + " " + result.unit + " " + result.city + " " + result.state_code
                        resultDiv.innerHTML = "<strong>" + formatted_address.toUpperCase() + "</strong>";
                        

                        resultDiv.innerHTML += "<input type='hidden' value='" + formatted_address.toUpperCase() + "'>";

                        resultDiv.addEventListener("click", function(e) {
                            searchBoxInput.value = this.getElementsByTagName("input")[0].value;
                            
                            location.href = 'https://goenergynet.com/home/map/location/' + encodeURIComponent(this.getElementsByTagName("input")[0].value) + "/" + result.home_id;

                            closeAllLists();
                        });

                        thisDiv.appendChild(resultDiv);
                    });
                });
                
                if(val != "") {
                    let bounds = {
                        north: 37.217136526305765,
                        west: -88.09002853540657,
                        east: -86.6403668705755,
                        south: 36.63771407524913,
                    }
                    // fetch the manaul search results not from google
                    fetch("https://goenergynet.com" + "/home/searchAddress/" + val)
                    .then(function(response) {
                        return response.json();
                    }).then(function(data) {
                        
                        if(data == false) {
                            googleService.getQueryPredictions({
                                input: val,
                                bounds: bounds
                            },
                            googleSearchResults);
                        } else {
                            manualSearchResults(data, "OK");
                        }
                    }).catch(error => {console.log(error)});
                }
            });

            searchBoxInput.addEventListener("keydown", function(e) { // This captures arrows and enter
                var resultsList = document.getElementById(this.id + "autocomplete-list");
                if (resultsList) resultsList = resultsList.getElementsByTagName("div");
                if (e.keyCode == 40) { //down
                    currentRow++;
                    highlightRow(resultsList);
                } else if (e.keyCode == 38) { //up

                    currentRow--;
                    highlightRow(resultsList);
                } else if (e.keyCode == 13) { //enter
                    e.preventDefault();
                    if (currentRow > -1) {
                        if (resultsList) resultsList[currentRow].click();
                    }
                }
            });


            // These are autocomplete functions
            function highlightRow(resultsList) {
                if (!resultsList) return false;
                removeActive(resultsList);

                if (currentRow >= resultsList.length) currentRow = 0;
                if (currentRow < 0) currentRow = (resultsList.length - 1);
                
                resultsList[currentRow].classList.add("autocomplete-active");
            }
            function removeActive(resultsList) {
                for (var i = 0; i < resultsList.length; i++) {
                    resultsList[i].classList.remove("autocomplete-active");
                }
            }
            function closeAllLists(thislist) {
                var resultsList = document.getElementsByClassName("autocomplete-items");
                for (var i = 0; i < resultsList.length; i++) {
                if (thislist != resultsList[i] && thislist != searchBoxInput) {
                    resultsList[i].parentNode.removeChild(resultsList[i]);
                }
                }
            }
            document.addEventListener("click", function (e) {
                closeAllLists(e.target);
            });
        }

        function renderGeoJson(data, pane, map) {
            let geo = new L.GeoJSON(data, {
                    style: function(feature) {
                        return {
                            color: colors[feature.properties.ready],
                            weight: 2,
                            opacity: 1,
                            clickable: false
                        };
                    },

                    pane: pane
                }).addTo(map);
                function onMapClick(e) {
                    if(singletooltipopen) {
                        document.querySelectorAll('.tooltip-big').forEach(tooltipbig => { tooltipbig.style.display = "none" });
                        singletooltipopen = false;
                    }
                    
                }
                map.on('click', onMapClick);
                
        }
        async function postDataAsJson({ url, data }) {
            
            const formDataJsonString = JSON.stringify(data);

            const fetchOptions = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json",
                },
                body: formDataJsonString,
            };
            
            const response = await fetch(url, fetchOptions);
            
            if (!response.ok) {
                const errorMessage = await response.text();
                throw new Error(errorMessage);
            }

            return response.json();
        }