const propertiesArray = [{id:"13-TRLISTRLIS98669",pos:{lat:54.5484464093366,lng:-6.30491870380784}},{id:"75-LHA832167",pos:{lat:54.4842708,lng:-6.23768}},{id:"75-LHA832221",pos:{lat:54.4833933,lng:-6.2347152}},{id:"75-LHA832300",pos:{lat:54.4625228,lng:-6.2928079}},{id:"75-LHA832355",pos:{lat:54.5443209,lng:-6.2539432}},{id:"83-SED743845",pos:{lat:54.48745263882,lng:-6.312859470639}},{id:"83-SED744143",pos:{lat:54.4807911,lng:-6.2265199}},{id:"83-SED744183",pos:{lat:54.5436101397704,lng:-6.24472552117919}},{id:"112-KHAM0A1401",pos:{lat:54.4695274,lng:-6.3134442}},{id:"112-KHAM0A2514",pos:{lat:54.5329897,lng:-6.3281485}},{id:"112-KHAM0A2856",pos:{lat:54.5200142,lng:-6.2704876}},{id:"83-SED743192",pos:{lat:54.5023628,lng:-6.26296189999994}},{id:"83-SED744249",pos:{lat:54.4647370792666,lng:-6.26888907406616}},{id:"13-TRLISTRLIS99850",pos:{lat:54.4691932100842,lng:-6.18560738679989}},{id:"47-366075",pos:{lat:54.501245389703,lng:-6.2615243174426}},{id:"47-715460",pos:{lat:54.533274716015,lng:-6.2061771802189}},{id:"47-715470",pos:{lat:54.53331984864,lng:-6.2052357248547}},{id:"47-899110",pos:{lat:54.487032050277,lng:-6.1614235334482}},{id:"47-948406",pos:{lat:54.489052691052,lng:-6.2611861840402}},{id:"47-948482",pos:{lat:54.48835470831,lng:-6.2487407342111}},{id:"47-964950",pos:{lat:54.4688851,lng:-6.3001383}},{id:"47-973837",pos:{lat:54.4586922,lng:-6.2876266}},{id:"47-973867",pos:{lat:54.4586922,lng:-6.2876266}},{id:"47-973869",pos:{lat:54.4586922,lng:-6.2876266}},{id:"47-973876",pos:{lat:54.4586922,lng:-6.2876266}},{id:"83-SED744279",pos:{lat:54.4762237275333,lng:-6.23299175174379}},{id:"130-996785",pos:{lat:54.5150407,lng:-6.2091593}},{id:"47-997535",pos:{lat:54.511217403744,lng:-6.1909240603909}},{id:"83-SED744288",pos:{lat:54.5067738468301,lng:-6.20720308363648}},{id:"83-SED744285",pos:{lat:54.5404134,lng:-6.2121111}},{id:"75-LHA832610",pos:{lat:54.4853044,lng:-6.2637015}},{id:"83-SED744305",pos:{lat:54.5047487,lng:-6.1960838}},{id:"83-SED744312",pos:{lat:54.4774372815853,lng:-6.23606264135829}},{id:"22-FDPFDP9868",pos:{lat:54.4820336722856,lng:-6.2264017836667}},{id:"75-LHA832635",pos:{lat:54.4672069,lng:-6.2629354}},{id:"130-1012538",pos:{lat:54.512964615194,lng:-6.2110835727688}},{id:"75-LHA832663",pos:{lat:54.5197832,lng:-6.2697882}},{id:"83-SED744332",pos:{lat:54.4619129,lng:-6.2877679}},{id:"130-1018140",pos:{lat:54.4936778,lng:-6.1894081}},{id:"24-HGMA8218",pos:{lat:54.5280648662329,lng:-6.25907313594779}},{id:"75-LHA831291",pos:{lat:54.4984587,lng:-6.21015190000003}},{id:"75-LHA832701",pos:{lat:54.4805121,lng:-6.223581}},{id:"75-LHA832715",pos:{lat:54.543714,lng:-6.255696}},{id:"47-1025265",pos:{lat:54.459478415978,lng:-6.3045422335344}},{id:"86-19492726",pos:{lat:54.516822,lng:-6.328361}},{id:"83-SED744343",pos:{lat:54.4775308,lng:-6.2148374}},{id:"47-1028084",pos:{lat:54.487347630788,lng:-6.1684388794808}},{id:"47-1028119",pos:{lat:54.460554945389,lng:-6.1818917436539}},{id:"18-CNRCJBE2919",pos:{lat:54.4761994668198,lng:-6.23305907196766}},{id:"75-LHA832740",pos:{lat:54.4819745,lng:-6.2208095}},{id:"83-SED744350",pos:{lat:54.4668585,lng:-6.2593988}},{id:"47-1031134",pos:{lat:54.54696480416,lng:-6.2551761129793}},{id:"83-SED744354",pos:{lat:54.4844962,lng:-6.2362241}},{id:"130-1032177",pos:{lat:54.519353667937,lng:-6.24217518502}},{id:"130-1032589",pos:{lat:54.471100557229,lng:-6.1773484021122}},{id:"130-1032957",pos:{lat:54.462967362481,lng:-6.2908978629517}},{id:"70-GOCGOC11567",pos:{lat:54.4833355675416,lng:-6.23417050087637}},{id:"112-KHAM0A3158",pos:{lat:54.4656188,lng:-6.2494251}},{id:"75-LHA832757",pos:{lat:54.4774122,lng:-6.2339177}},{id:"47-1035410",pos:{lat:54.481674517671,lng:-6.2270860080033}},{id:"83-SED744358",pos:{lat:54.4769094384457,lng:-6.23372090999527}},{id:"83-SED744359",pos:{lat:54.482844,lng:-6.2212093}},{id:"83-SED744360",pos:{lat:54.478968495221,lng:-6.23151548228503}},{id:"40-MCSMCS7690",pos:{lat:54.5435022,lng:-6.2567912}},{id:"83-SED744363",pos:{lat:54.4655923825727,lng:-6.25269506007065}},{id:"1-18517735",pos:{lat:54.534721,lng:-6.331702}},{id:"83-SED744364",pos:{lat:54.4685127980086,lng:-6.25698332844109}},{id:"75-LHA832775",pos:{lat:54.4809754,lng:-6.2246071}},{id:"168-909882",pos:{lat:54.517748992429,lng:-6.2925069169637}},{id:"168-1006399",pos:{lat:54.516641335955,lng:-6.2896045349833}},{id:"47-1039358",pos:{lat:54.4586922,lng:-6.2876266}},{id:"75-LHA832780",pos:{lat:54.4663182,lng:-6.26329680000003}},{id:"83-SED744367",pos:{lat:54.49553343404,lng:-6.21222627418308}},{id:"83-SED744368",pos:{lat:54.4638341,lng:-6.2956081}},{id:"83-SED744371",pos:{lat:54.468052369995,lng:-6.18582904150134}},{id:"47-1040930",pos:{lat:54.476379959247,lng:-6.2297841844212}},{id:"24-HGMA8343",pos:{lat:54.5084824689501,lng:-6.18825222133261}},{id:"75-LHA832782",pos:{lat:54.4814064,lng:-6.2272747}},{id:"130-1040967",pos:{lat:54.540918426047,lng:-6.2590649055521}},{id:"75-LHA832794",pos:{lat:54.4768881,lng:-6.2332865}},{id:"75-LHA832790",pos:{lat:54.4776943,lng:-6.2249312}},{id:"47-1043097",pos:{lat:54.47824085326,lng:-6.2339065545335}},{id:"83-SED744376",pos:{lat:54.4789066,lng:-6.2193269}},{id:"135-18756293",pos:{lat:54.460578,lng:-6.296944}},{id:"47-1043588",pos:{lat:54.4586922,lng:-6.2876266}},{id:"47-1043589",pos:{lat:54.4586922,lng:-6.2876266}},{id:"47-1043590",pos:{lat:54.4586922,lng:-6.2876266}},{id:"47-1043593",pos:{lat:54.4586922,lng:-6.2876266}},{id:"47-1043875",pos:{lat:54.478215067731,lng:-6.2333440524068}},{id:"83-SED744379",pos:{lat:54.4815199509799,lng:-6.22743436533557}},{id:"47-1044470",pos:{lat:54.459500489808,lng:-6.298878068151}},{id:"83-SED744378",pos:{lat:54.4811981976373,lng:-6.2225904695653}},{id:"83-SED744380",pos:{lat:54.4778788342923,lng:-6.22617153357039}},{id:"107-12789925",pos:{lat:54.47728,lng:-6.227423}},{id:"75-LHA832810",pos:{lat:54.4753256,lng:-6.2361111}},{id:"47-1044976",pos:{lat:54.476598934667,lng:-6.2311828106883}},{id:"47-1045253",pos:{lat:54.468016933712,lng:-6.2609431676255}},];

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);
}