const propertiesArray = [{id:"2-COM13679",pos:{lat:54.4374177078742,lng:-6.36354996522064}},{id:"2-POR13695",pos:{lat:54.4954137201244,lng:-6.5533904793457}},{id:"2-COM15485",pos:{lat:54.4263568740993,lng:-6.43599723173828}},{id:"2-POR15942",pos:{lat:54.195487,lng:-6.3331251}},{id:"83-SED744236",pos:{lat:54.3969642580613,lng:-6.36025155697785}},{id:"130-658303",pos:{lat:54.463928655076,lng:-6.6131723513428}},{id:"130-812128",pos:{lat:54.419938260133,lng:-6.4668242534424}},{id:"2-ARM16744",pos:{lat:54.3919188481254,lng:-6.54145074841004}},{id:"130-965675",pos:{lat:54.4140712,lng:-6.4614898}},{id:"130-969741",pos:{lat:54.484838918379,lng:-6.5458530354431}},{id:"29-HPA854569",pos:{lat:54.4003781821561,lng:-6.51500580681534}},{id:"130-996601",pos:{lat:54.406210346049,lng:-6.4391102263367}},{id:"136-DUN220046",pos:{lat:54.422798,lng:-6.44427}},{id:"136-NEW250036",pos:{lat:54.408887,lng:-6.461922}},{id:"130-999030",pos:{lat:54.443903030646,lng:-6.6008760074097}},{id:"130-999032",pos:{lat:54.443903030646,lng:-6.6008760074097}},{id:"130-999009",pos:{lat:54.443903030646,lng:-6.6008760074097}},{id:"130-999023",pos:{lat:54.443903030646,lng:-6.6008760074097}},{id:"130-999026",pos:{lat:54.443903030646,lng:-6.6008760074097}},{id:"62-12646572",pos:{lat:54.4221,lng:-6.443029}},{id:"130-1003255",pos:{lat:54.406392883117,lng:-6.4391486470825}},{id:"130-687854",pos:{lat:54.408938013795,lng:-6.3973386425476}},{id:"130-687859",pos:{lat:54.408938013795,lng:-6.3973386425476}},{id:"61-PLIK0A439",pos:{lat:54.4571813,lng:-6.5824488}},{id:"13-TRLISTRL100683",pos:{lat:54.388426,lng:-6.53804}},{id:"130-1011312",pos:{lat:54.441538,lng:-6.4658823}},{id:"130-1014528",pos:{lat:54.42470437963,lng:-6.3597898680879}},{id:"29-HPA854606",pos:{lat:54.363496999485,lng:-6.493183055542}},{id:"29-HPA854607",pos:{lat:54.352945,lng:-6.4897248}},{id:"29-HPA854608",pos:{lat:54.378463114668,lng:-6.49224987616576}},{id:"62-12683500",pos:{lat:54.460498,lng:-6.44715}},{id:"29-HPA854609",pos:{lat:54.3609965,lng:-6.4949855}},{id:"18-CNRCJBE2899",pos:{lat:54.385283241203,lng:-6.46844640655517}},{id:"29-HPA854613",pos:{lat:54.3945428,lng:-6.4432969}},{id:"130-1021943",pos:{lat:54.3726022,lng:-6.4335038}},{id:"2-POR17990",pos:{lat:54.3527445,lng:-6.5457083}},{id:"47-1024602",pos:{lat:54.426209203659,lng:-6.3454048742401}},{id:"62-12737998",pos:{lat:54.452671,lng:-6.584259}},{id:"130-1028283",pos:{lat:54.484838918379,lng:-6.5458530354431}},{id:"130-1028292",pos:{lat:54.484838918379,lng:-6.5458530354431}},{id:"130-1028301",pos:{lat:54.484838918379,lng:-6.5458530354431}},{id:"2-POR16144",pos:{lat:54.4203331,lng:-6.4548387}},{id:"2-POR18264",pos:{lat:54.417884,lng:-6.4439298}},{id:"130-1029859",pos:{lat:54.4049021,lng:-6.4436324}},{id:"62-12744996",pos:{lat:54.425529,lng:-6.432253}},{id:"130-1030656",pos:{lat:54.4285708,lng:-6.4099853}},{id:"62-18712730",pos:{lat:54.461029,lng:-6.585536}},{id:"2-POR17688",pos:{lat:54.4176291,lng:-6.4239847}},{id:"130-1036927",pos:{lat:54.4311686,lng:-6.4662435}},{id:"2-POR18386",pos:{lat:54.4218261,lng:-6.4592016}},{id:"62-18827598",pos:{lat:54.431911,lng:-6.409418}},{id:"62-18743428",pos:{lat:54.412139,lng:-6.459116}},{id:"2-POR18506",pos:{lat:54.4091921,lng:-6.3987945}},{id:"135-18630563",pos:{lat:54.434154,lng:-6.419244}},{id:"62-18829779",pos:{lat:54.420581,lng:-6.517766}},{id:"2-ARM18298",pos:{lat:54.4438589,lng:-6.5842646}},{id:"2-POR18539",pos:{lat:54.406836,lng:-6.4408658}},{id:"2-POR18624",pos:{lat:54.4396992,lng:-6.4137921}},{id:"130-1040800",pos:{lat:54.4250013,lng:-6.40373}},{id:"130-1042741",pos:{lat:54.443903030646,lng:-6.6008760074097}},{id:"90-187003",pos:{lat:54.437944,lng:-6.452519}},{id:"62-18852902",pos:{lat:54.417648,lng:-6.425006}},{id:"62-18852300",pos:{lat:54.399486,lng:-6.545603}},{id:"47-1043694",pos:{lat:54.433186242224,lng:-6.4203790709958}},{id:"86-19600255",pos:{lat:54.42992,lng:-6.444725}},{id:"62-18711162",pos:{lat:54.426601,lng:-6.434659}},{id:"130-1044227",pos:{lat:54.434467120637,lng:-6.420371237793}},{id:"130-1044235",pos:{lat:54.434467120637,lng:-6.420371237793}},{id:"130-1044243",pos:{lat:54.434467120637,lng:-6.420371237793}},{id:"62-18866975",pos:{lat:54.412593,lng:-6.460378}},{id:"62-18866989",pos:{lat:0,lng:0}},{id:"62-18867039",pos:{lat:54.431907,lng:-6.46026}},{id:"62-18867148",pos:{lat:0,lng:0}},{id:"130-1044710",pos:{lat:54.5018379,lng:-6.5575593}},{id:"130-1045239",pos:{lat:54.443903030646,lng:-6.6008760074097}},{id:"62-18896306",pos:{lat:54.438152,lng:-6.407139}},{id:"62-18896309",pos:{lat:54.438152,lng:-6.407139}},{id:"62-18896312",pos:{lat:54.438152,lng:-6.407139}},{id:"62-18896313",pos:{lat:54.435012,lng:-6.413794}},{id:"62-18896315",pos:{lat:54.438152,lng:-6.407139}},{id:"62-18896319",pos:{lat:54.438152,lng:-6.407139}},{id:"62-18896318",pos:{lat:54.438152,lng:-6.407139}},{id:"62-18878464",pos:{lat:54.432937,lng:-6.459708}},];

let map; 
let markersArray = [];
let markersArrayAll = [];
let markersArrayChanged = [];
let clusterMarkersArray = [];
const infoWindow = document.querySelector(".info-window-control");
async function initMap() {  
  
  const { Map, InfoWindow } = await google.maps.importLibrary("maps","geometry");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  let sw = new google.maps.LatLng(54.019510, -8.349163);
  let ne = new google.maps.LatLng(55.343439, -5.438346);
  let bounds = new google.maps.LatLngBounds(sw, ne);

  // Map Options
  let mapOptions = {
    zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapId: "1c886fcb938b1123",
    disableDefaultUI: false,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.RIGHT_TOP,
    },
  };
  map = new Map(document.getElementById("area_map"), mapOptions);
  var _markerCluster = new markerClusterer.MarkerClusterer({map,algorithmOptions: { radius: 80}});
  
  buildMakers(propertiesArray, AdvancedMarkerElement, bounds, InfoWindow);
  setMapBounds(map, markersArray);
  setMapMarkers( _markerCluster, markersArray, "add");

  let ClusterChanged = "N";

  google.maps.event.addListener(map, "idle", () => {
    
      markersArray.length = 0;
      markersArrayChanged.length = 0;
  
      markersArrayAll.map((property, i) => {
        let position = { lat:property.position.lat, lng: property.position.lng };
        if(map.getBounds().contains(position)){
          markersArray.push(property);
        } else { 
          markersArrayChanged.push(property);
        }
      });
      if(markersArrayChanged.length != 0 ){
        ClusterChanged = "Y";
        setMapMarkers( _markerCluster, markersArrayChanged, "remove");
        setMapMarkers( _markerCluster, markersArray, "add");
      }
      if(markersArrayChanged.length == 0 && ClusterChanged == "Y"){
        ClusterChanged = "N";
        setMapMarkers( _markerCluster, markersArrayAll, "add");
      }
  });
  

  google.maps.event.addListener(_markerCluster, 'click', function(cluster) {
    clusterMarkersArray = []
    var markers = cluster.markers;

    for (let i in markers) {

      let position = { lat:markers[i].position.lat, lng: markers[i].position.lng };
      var clusterMarkers = clusterMarkersArray;

      for (i = 0; i < clusterMarkers.length; i++) {

        var p1 = new google.maps.LatLng(clusterMarkers[i].lat, clusterMarkers[i].lng),
        p2 = new google.maps.LatLng(position.lat, position.lng);
      
        if(p1.equals(p2)){
          var quot = 360.0 / clusterMarkersArray.length;
          var newLat = position.lat + -.00012 * Math.cos(+quot * i); //+ -.00008 * Math.cos((+quot * i) / 180 * Math.PI);  //x 
          var newLng = position.lng + -.00012 * Math.sin(+quot * i);  //+ -.0008 * Math.sin((+quot * i) / 180 * Math.PI);  //Y
          markers[i].position = {lat:newLat,lng:newLng};

        }
      }
      clusterMarkersArray.push(position);
    }
  });
}

function buildMakers(properties, AdvancedMarkerElement, bounds, InfoWindow){
  const infoWindow = new InfoWindow();
  properties.map((property, i) => {
    let position = {lat:property.pos.lat,lng:property.pos.lng};
    // check if maker is withing NI Bounds
    if(bounds.contains(position)){
      const icon = document.createElement("img");
      icon.src = "/images/pin32x.png";
      const marker = new AdvancedMarkerElement({
        map,
        position: position,
        content: icon,
        gmpClickable: true,
      });
      // Add a click listener for each marker, and set up the info window.
      marker.addListener("click", () => {
        infoWindow.close();
        markerClick(marker, property.id, infoWindow);
      });
      // check if maker is withing NI Bounds
      if(bounds.contains(position)){
        markersArray.push(marker);
        markersArrayAll.push(marker);
      } 
    }
  });  
  //console.timeEnd('build markers');
  $("#map-loading").addClass('hide');
}

function markerClick(marker, id, infoWindow){
  const request = new Request("/_search-includes/marker-info?id="+id)
  fetch(request)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Something went wrong on API server!");
    }
  })
  .then((response) => {
    const infoWindowContent = buildContent(response);
    infoWindow.setContent(infoWindowContent);
    infoWindow.open(marker.map, marker);
  })
  .catch((error) => {
    console.error(error);
  });
}

function buildContent(property){
content = `
  <div class="map-property-card">
    <a href="${property.url}" class="map-property-card--container">
      <div class="map-property-card--image">
        <img class="prop-image" loading="lazy" src="${property.img}" alt="${property.add1}, ${property.add2}" title="${property.add1}, ${property.add2}" onerror="this.onerror=null;this.src='/images/unavailable.svg';" width="" height="">
        <div class="prop-agent">
          <div class="agent-img">
            <img loading="lazy" src="${property.agent.logo}" alt="${property.agent.name}" title="${property.agent.name}" width="40" height="40">
          </div>
          <div class="agent-img agent-img-2 ${property.agent2.logo == '' ? 'u-hidden':''}">
            <img loading="lazy" src="${property.agent2.logo}" alt="${property.agent2.name}" title="${property.agent2.name}" width="40" height="40">
          </div>
        </div>
        <div class="prop-sale-status ${property.statust == "Sold" ? 'sale-sold':''} ${property.statust == "" ? 'u-hidden':''}">${property.statust}</div>
        <div class="ribbon-top left ${property.newdev != 1 ? 'u-hidden':''}" style="--d:10px;--w:150px;">New Home</div>
      </div>  
      <div class="map-property-card--info"> 
        <div class="map-property-card--top-dets"> 
          <span class="map-property-card--price">
            <span class="status">${property.pricet}</span>
            <span class="amount">${property.poa != 1 
            ? `&pound;${property.price}${
                property.sector === "RR" &&
                !["Weekly", "Per Week", "Weekly Rental Of"].includes(property.pricet)
                  ? 'pm' 
                  : ''
              }` 
            : property.price
          }</span> 
          </span>
          <ul class="map-property-card--icons">
            <li class="${property.beds > 0 ? '':'u-hidden'}" title="${property.beds} Bedroom${property.beds > 1 ? "s":""}"><span><i class="icon-bedroom"></i></span>${property.beds}</li>
            <li class="${property.reps > 0 ? '':'u-hidden'}" title="${property.reps} Reception${property.reps > 1 ? "s":""}"><span><i class="icon-reception"></i></span>${property.reps}</li>
            <li class="${property.baths > 0 ? '':'u-hidden'}" title="${property.baths} Bathroom${property.baths > 1 ? "s":""}"><span><i class="icon-bathroom"></i></span>${property.baths}</li>
          </ul>
        </div> 
        <div class="map-property-card--main-dets">
          <span class="prop-headline">${property.hline}</span>
          <h2 class="prop-address"><strong>${property.add1}</strong></h2>
          <span class="prop-address-2">${property.add2}</span>
        </div>
      </div>
    </a>
  </div>
  `;
return content;  
}

function setMapMarkers(_markerCluster, _MarkersArray, Action){
  var mc = _markerCluster;
  var ma = _MarkersArray;
  if(Action == "add"){
    mc.addMarkers(ma);
  }
  if(Action == "remove"){
    mc.removeMarkers(ma);
  }
  if(Action == "clear"){
    mc.clearMarkers();
  }
}

function setMapBounds(map, markers){
  var boundsmarkers = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      let position = { lat: markers[i].position.lat, lng: markers[i].position.lng };
      boundsmarkers.extend(position);
  }
  map.fitBounds(boundsmarkers);
}