const propertiesArray = [{id:"16-PQ145876",pos:{lat:54.6407736,lng:-5.9280279}},{id:"16-PQ147656",pos:{lat:54.6355144,lng:-5.9363386}},{id:"1-17892031",pos:{lat:54.6189,lng:-5.948646}},{id:"1-17898555",pos:{lat:54.630187,lng:-5.974555}},{id:"1-17217467",pos:{lat:54.623348,lng:-5.924998}},{id:"1-17929701",pos:{lat:54.606281,lng:-5.984779}},{id:"1-10099879",pos:{lat:54.616489,lng:-5.937729}},{id:"1-17778531",pos:{lat:54.625164,lng:-5.988473}},{id:"13-TRLTRL98451",pos:{lat:54.6030911,lng:-5.9401092}},{id:"1-18100710",pos:{lat:54.615295,lng:-5.958886}},{id:"8-19407577",pos:{lat:54.612144,lng:-5.92951}},{id:"1-18131343",pos:{lat:54.623016,lng:-5.97768}},{id:"1-17883380",pos:{lat:54.619754,lng:-5.950937}},{id:"13-TRLTRL99274",pos:{lat:54.65135,lng:-5.93461}},{id:"32-PQ3880",pos:{lat:54.6121447,lng:-5.9295104}},{id:"1-10028632",pos:{lat:54.609226,lng:-5.935949}},{id:"111-19468014",pos:{lat:54.620361,lng:-5.954234}},{id:"16-PQ150119",pos:{lat:54.622581,lng:-5.974356}},{id:"1-18273435",pos:{lat:54.608097,lng:-5.962069}},{id:"42-MCGR0A6600",pos:{lat:54.6157748,lng:-5.9403731}},{id:"42-MCGR0A7603",pos:{lat:54.6157748,lng:-5.9403731}},{id:"8-19497037",pos:{lat:54.632579,lng:-5.927275}},{id:"1-18273378",pos:{lat:54.605388,lng:-5.961277}},{id:"70-GOCGOC11139",pos:{lat:54.6193981425809,lng:-5.93806517283362}},{id:"8-19509168",pos:{lat:54.649055,lng:-5.935754}},{id:"16-PQ150979",pos:{lat:54.642111,lng:-5.935806}},{id:"157-165644",pos:{lat:54.6145366,lng:-5.9605116}},{id:"1-10022146",pos:{lat:54.610454,lng:-5.931136}},{id:"1-18375345",pos:{lat:54.604164,lng:-5.959385}},{id:"16-PQ151446",pos:{lat:54.638203,lng:-5.923767}},{id:"1-18363590",pos:{lat:54.62725,lng:-5.975208}},{id:"1-17895347",pos:{lat:54.630004,lng:-5.938652}},{id:"2-BEL17576",pos:{lat:54.6206145,lng:-5.9563036}},{id:"1-18374226",pos:{lat:54.609733,lng:-5.937424}},{id:"49-FORS0A676",pos:{lat:54.6487972259398,lng:-5.93467476888212}},{id:"1-18379431",pos:{lat:54.627449,lng:-5.935111}},{id:"3-NBF250028",pos:{lat:54.630676,lng:-5.939499}},{id:"2-BEL17643",pos:{lat:54.6248957,lng:-5.989634}},{id:"32-PQ5539",pos:{lat:54.6154777,lng:-5.9377122}},{id:"1-18387583",pos:{lat:54.621002,lng:-5.922113}},{id:"1-18397748",pos:{lat:54.611579,lng:-5.965042}},{id:"1-18346446",pos:{lat:54.623203,lng:-5.985263}},{id:"49-FORS0A649",pos:{lat:54.6354504,lng:-5.9495009}},{id:"1-18415165",pos:{lat:54.630928,lng:-5.941266}},{id:"137-101253013370",pos:{lat:54.6075297,lng:-5.9185337}},{id:"2-BEL17637",pos:{lat:54.6172918,lng:-5.9275194}},{id:"2-BEL17822",pos:{lat:54.6174707,lng:-5.9423068}},{id:"1-18429581",pos:{lat:54.624839,lng:-5.935136}},{id:"105-c4d76f6cea4049e7ad902e2e0da3c3bf",pos:{lat:54.6590944,lng:-5.942025}},{id:"8-19575375",pos:{lat:54.61502,lng:-5.959919}},{id:"1-18344835",pos:{lat:54.623321,lng:-5.92124}},{id:"1-18450113",pos:{lat:54.607261,lng:-5.952758}},{id:"32-PQ5556",pos:{lat:54.6323836,lng:-5.9311075}},{id:"16-PQ152127",pos:{lat:54.61727,lng:-5.924961}},{id:"1-18457759",pos:{lat:54.608905,lng:-5.935677}},{id:"1-18459478",pos:{lat:54.615341,lng:-5.942855}},{id:"16-PQ152128",pos:{lat:54.617381,lng:-5.924973}},{id:"8-19588414",pos:{lat:54.617324,lng:-5.92515}},{id:"1-18408810",pos:{lat:54.605438,lng:-5.961289}},{id:"1-18408805",pos:{lat:54.605125,lng:-5.961762}},{id:"1-18448803",pos:{lat:54.606365,lng:-5.961289}},{id:"1-18448802",pos:{lat:54.605438,lng:-5.961917}},{id:"16-PQ152242",pos:{lat:54.621066,lng:-5.941502}},{id:"76-103296013818",pos:{lat:54.6271,lng:-5.93058}},{id:"3-NBF250245",pos:{lat:54.633847,lng:-5.945384}},{id:"55-19195319",pos:{lat:54.605564,lng:-5.961518}},{id:"1-18424268",pos:{lat:54.605327,lng:-5.9642}},{id:"1-18462408",pos:{lat:54.630786,lng:-5.960794}},{id:"105-0ba456c62e3046e5a68d361deb6662d5",pos:{lat:54.634515,lng:-5.9391199}},{id:"1-18479233",pos:{lat:54.627021,lng:-5.964929}},{id:"1-18477278",pos:{lat:54.61536,lng:-5.963859}},{id:"1-18330638",pos:{lat:54.620487,lng:-5.940969}},{id:"3-NBF250174",pos:{lat:54.649793,lng:-5.936976}},{id:"32-PQ6597",pos:{lat:54.6158388,lng:-5.9404109}},{id:"32-PQ6598",pos:{lat:54.6158388,lng:-5.9404109}},{id:"76-103296013923",pos:{lat:54.6356,lng:-5.95648}},{id:"55-18788592",pos:{lat:54.602432,lng:-5.955478}},{id:"1-18469760",pos:{lat:54.629711,lng:-5.963561}},{id:"1-18486727",pos:{lat:54.633487,lng:-5.94311}},{id:"32-PQ4000",pos:{lat:54.616861,lng:-5.9353972}},{id:"55-19532182",pos:{lat:54.611968,lng:-5.964252}},{id:"119-19538635",pos:{lat:54.65216,lng:-5.934432}},{id:"2-BEL17916",pos:{lat:54.6229357,lng:-5.949986}},{id:"16-PQ152396",pos:{lat:54.629727,lng:-5.975538}},{id:"49-FORS0A733",pos:{lat:54.6297998527363,lng:-5.93606739749742}},{id:"3-NBF250244",pos:{lat:54.633276,lng:-5.936604}},{id:"2-BEL18269",pos:{lat:54.6338189,lng:-5.928207}},{id:"76-103296013981",pos:{lat:54.6337013,lng:-5.9503798}},{id:"16-PQ152805",pos:{lat:54.61306,lng:-5.934104}},{id:"1-18456874",pos:{lat:54.605709,lng:-5.947451}},{id:"1-18511304",pos:{lat:54.627315,lng:-5.993634}},{id:"3-NBF250299",pos:{lat:54.641217,lng:-5.933669}},{id:"105-dfe0f2b6f0404b6fbcbd8bf4ea356061",pos:{lat:54.6080433,lng:-5.9588277}},{id:"1-18504405",pos:{lat:54.627407,lng:-5.970685}},{id:"1-18511363",pos:{lat:54.618816,lng:-5.937297}},{id:"1-18515346",pos:{lat:54.623916,lng:-5.9302}},{id:"72-19643236",pos:{lat:54.639801,lng:-5.936424}},{id:"76-103296014025",pos:{lat:54.6371,lng:-5.93627}},{id:"76-103296014047",pos:{lat:54.654285,lng:-5.9239658}},{id:"1-18538579",pos:{lat:54.636566,lng:-5.951289}},{id:"1-18519543",pos:{lat:54.624202,lng:-5.948311}},{id:"1-18531460",pos:{lat:54.611946,lng:-5.936643}},{id:"1-18529702",pos:{lat:54.634681,lng:-6.008388}},{id:"1-18539595",pos:{lat:54.620285,lng:-5.977328}},{id:"1-10031105",pos:{lat:54.626698,lng:-5.992863}},{id:"8-19648090",pos:{lat:54.649879,lng:-5.927896}},{id:"2-BEL18452",pos:{lat:54.6038819,lng:-5.9454018}},{id:"55-18787607",pos:{lat:54.623012,lng:-5.975368}},{id:"1-18534022",pos:{lat:54.622249,lng:-5.973521}},{id:"2-BEL18676",pos:{lat:54.603921,lng:-5.9621891}},{id:"2-BEL18677",pos:{lat:54.607678,lng:-5.9611344}},{id:"2-BEL18678",pos:{lat:54.6088433,lng:-5.9606444}},{id:"2-BEL18680",pos:{lat:54.6228461,lng:-5.9770598}},{id:"2-BEL18681",pos:{lat:54.6294498,lng:-5.9598257}},{id:"1-18519972",pos:{lat:54.627679,lng:-5.942346}},{id:"43-MCGR1A8083",pos:{lat:54.6177562,lng:-5.9699869}},{id:"1-18541748",pos:{lat:54.603069,lng:-5.951739}},{id:"1-18547607",pos:{lat:54.61774,lng:-5.936434}},{id:"137-101253013943",pos:{lat:54.6244,lng:-5.93227}},{id:"1-18533836",pos:{lat:54.615852,lng:-5.961149}},{id:"105-4f0523a9bb2d4c79aa5cecc7504d9e98",pos:{lat:54.6325685,lng:-5.9271768}},{id:"113-CCOP0A3068",pos:{lat:54.6558577513864,lng:-5.93301993749402}},{id:"16-PQ153262",pos:{lat:54.617381,lng:-5.924973}},{id:"16-PQ153261",pos:{lat:54.617381,lng:-5.924973}},{id:"16-PQ153263",pos:{lat:54.617381,lng:-5.924973}},{id:"16-PQ153265",pos:{lat:54.61727,lng:-5.924961}},{id:"16-PQ153264",pos:{lat:54.61727,lng:-5.924961}},{id:"1-18548662",pos:{lat:54.624153,lng:-5.986279}},{id:"42-MCGR0A8117",pos:{lat:54.6177562,lng:-5.9699869}},{id:"1-18555811",pos:{lat:54.655863,lng:-5.933123}},{id:"1-18544367",pos:{lat:54.629005,lng:-5.927532}},{id:"3-NBF250342",pos:{lat:54.644636,lng:-5.935303}},{id:"3-NBF250314",pos:{lat:54.617947,lng:-5.954371}},{id:"1-18552325",pos:{lat:54.624526,lng:-5.931158}},{id:"1-18556146",pos:{lat:54.615802,lng:-5.958877}},];

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