import * as alies_localization      from "./wcmlim_localization.js";
import * as alies_calDistanceSearch from "./wcmlim_cal_distance_search.js";
var localization = alies_localization.wcmlim_localization();

export function GlobalMapList(elementId, rangeId) {
  if (jQuery("#" + elementId).length > 0) {
    var elmap = document.getElementById(elementId);
    var elmapapply = document.getElementById("wcmlim-search_apply");

    var search_lat, search_lng, map, icon;
    var infowindow = new google.maps.InfoWindow();
    
    var marker, i;
    if (elmap) {
      if(elementId == "wcmlim_storeshrtsearch_input") {
          document.getElementById('wcmlim-storeautodetectbrowser_apply').addEventListener('click', () => {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((pos) => {
                    const lat = pos.coords.latitude;
                    const lng = pos.coords.longitude
                    jQuery("#wcmlim-storeshrtspinner").show();
                    jQuery(".wcmlim-storeshrtshowlocations").css('margin-top', '10px');
                    alies_calDistanceSearch.calculate_distance_search(
                      lat,
                      lng,
                      rangeId
                    );
                }, (error) => {
                    console.log('Location permission denied or unavailable.');
                });
            } else {
                console.log('Geolocation is not supported by this browser.');
            }
        });

        jQuery('#wcmlim_storeshrtsearch_input').on('input', function() {
          let val = jQuery(this).val().trim();
          if(val != "") {
            jQuery("#wcmlim-storeshrtdetect_icons").hide();
            jQuery("#wcmlim-storeshrtsearch_icons").hide();
            jQuery("#wcmlim-storeshrtsearch_apply").show();
            jQuery("#wcmlim-storeshrtsearch_remove").show();
          } else {
            jQuery("#wcmlim-storeshrtdetect_icons").show();
            jQuery("#wcmlim-storeshrtsearch_icons").show();
            jQuery("#wcmlim-storeshrtsearch_apply").hide();
            jQuery("#wcmlim-storeshrtsearch_remove").hide();
          }
        });

        jQuery("#wcmlim-storeshrtsearch_remove").on("click", function() {
          jQuery("#wcmlim_storeshrtsearch_input").val("");  
          jQuery("#wcmlim-storeshrtdetect_icons").show();
          jQuery("#wcmlim-storeshrtsearch_icons").show(); 
          jQuery("#wcmlim-storeshrtsearch_apply").hide();
          jQuery("#wcmlim-storeshrtsearch_remove").hide();
          jQuery('.wcmlim-storeshrtlocation_item').removeClass('highlighted');

          jQuery
            .ajax({
              url: localization.ajaxurl,
              type: "post",
              data: {
                loc_key: -1,
                action: "wcmlim_set_location_on_change",
              }, 
              success: function(response) {
                if (response.data == "success") {
                    jQuery('#wcmlim-storeshrtselected').text('Select Store');
                }
              }
            });
        });

        elmap.addEventListener("focus", (e) => {
          const input = document.getElementById(elementId);
          const options = {};
          const autocomplete = new google.maps.places.Autocomplete(
            input,
            options
          );
          google.maps.event.addListener(autocomplete, "place_changed", (e) => {
            const place = autocomplete.getPlace();
            search_lat = place.geometry.location.lat();
            search_lng = place.geometry.location.lng();
            elmapapply.addEventListener("click", (e) => {
              jQuery("#wcmlim-storeshrtspinner").show();
              jQuery(".wcmlim-storeshrtshowlocations").css('margin-top', '10px');
              alies_calDistanceSearch.calculate_distance_search(
                search_lat,
                search_lng,
                rangeId
              );
            });
          });
        });
      } else {
        elmap.addEventListener("focus", (e) => {
          const input = document.getElementById(elementId);
  
          const options = {};
          const autocomplete = new google.maps.places.Autocomplete(
            input,
            options
          );
          google.maps.event.addListener(autocomplete, "place_changed", () => {
            const place = autocomplete.getPlace();
            var searchedaddress = jQuery("#" + elementId).val();
            search_lat = place.geometry.location.lat();
            search_lng = place.geometry.location.lng();
            var locations = JSON.parse(localization.storeOnMapArr); 
            for (i = 0; i < locations.length; i++) {
              if(rangeId !== "rangeInputList" && rangeId !== "storeshrtsearchstore") {
                if (locations[i][4] == "origin") {
                  map = new google.maps.Map(document.getElementById("map"), {
                    zoom: parseInt(localization.default_zoom),
                    center: new google.maps.LatLng(search_lat, search_lng),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                  });
                  marker = new google.maps.Marker({
                    position: new google.maps.LatLng(search_lat, search_lng),
                    map: map,
                    icon: icon,
                    label: {
                      fontFamily: "'Font Awesome 5 Free'",
                      fontWeight: "900", 
                      color: "#FFFFFF", 
                    },
                  });
    
                  google.maps.event.addListener(
                    marker,
                    "click",
                    (function (marker, i) {
                      return function () {
                        infowindow.setContent(
                          "<div class='locator-store-block'><h4>" +
                            searchedaddress +
                            "</h4></div>"
                        );
                        infowindow.open(map, marker);
                      };
                    })(marker)
                  );
                } else {
                  var markers = locations.map(function (location, i) {
                    var infowindow = new google.maps.InfoWindow({
                      maxWidth: 250,
                    });
                    var marker = new google.maps.Marker({
                      position: new google.maps.LatLng(
                        locations[i][1],
                        locations[i][2]
                      ),
                      map: map,
                    });
                    google.maps.event.addListener(
                      marker,
                      "click",
                      (function (marker, i) {
                        return function () {
                          infowindow.setContent(locations[i][0]);
                          infowindow.open(map, marker);
                        };
                      })(marker, i) 
                    );
                    return marker;
                  });
                  // // Add a marker clusterer to manage the markers.
                  new MarkerClusterer(map, markers, {
                    imagePath:
                      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
                  });
                }
              }
              
            }
            alies_calDistanceSearch.calculate_distance_search(
              search_lat,
              search_lng,
              rangeId
            );
            
          });
        });
      }
     
    }
    var rangeInputLength =
      jQuery("#" + rangeId).length > 0 ? jQuery("#" + rangeId).val() : 0;
    if (rangeInputLength > 0) {
      jQuery(document).on("change", "#" + rangeId, function() {
        rangeInputCallback(rangeId);
      });
        
    }
  }
}

export function rangeInputCallback(rangeId) {
  let closest = "";
  if(rangeId == "rangeInput") {
    closest = "map-view-locations";
  } else {
    closest = "list-view-locations";
  }
  var rangeInputLength =
    jQuery("#" + rangeId).length > 0 ? jQuery("#" + rangeId).val() : 0;
  if (rangeInputLength > 0) {
    var rangeInput = document.getElementById(rangeId).value;
    jQuery(".miles").each(function () {
      if (Math.round(rangeInput) < Math.round(jQuery(this).data("value"))) {
        var divid = jQuery(this).data("id");
        jQuery("#" + rangeId).closest("." + closest).find("#" + divid).hide(350);
      } else {
        var divid = jQuery(this).data("id");
        jQuery("#" + rangeId).closest("." + closest).find("#" + divid).show(350);
      }
    });
    if (localization.setting_loc_dis_unit && localization.away) {
      jQuery("#" + rangeId).closest(".range-bar").find("#rangedisplay").html(rangeInput + " " + localization.setting_loc_dis_unit + " " + localization.away);
    }
  }
}

