const propertiesArray = [{id:"12-bcv515652",pos:{lat:54.967490316574,lng:-6.4755988730469}},{id:"27-18214912",pos:{lat:54.990592,lng:-6.216355}},{id:"59-HIBMHIBM4024",pos:{lat:54.8624847,lng:-6.2803332}},{id:"39-HCLC1A10004764",pos:{lat:54.9687383,lng:-5.9581579}},{id:"152-133011",pos:{lat:54.8665178,lng:-6.2758389}},{id:"106-19326552",pos:{lat:54.826484,lng:-6.161926}},{id:"125-PAUB674057",pos:{lat:54.8652935,lng:-6.2802213}},{id:"125-PAUB674058",pos:{lat:54.8652935,lng:-6.2802213}},{id:"133-14156438",pos:{lat:54.895114,lng:-5.989652}},{id:"141-766376",pos:{lat:54.873753039895,lng:-6.2126532289127}},{id:"141-811614",pos:{lat:54.916317935643,lng:-6.1496991543245}},{id:"141-854586",pos:{lat:54.84908726791,lng:-6.3702535293609}},{id:"141-854604",pos:{lat:54.849465665575,lng:-6.3699300183321}},{id:"141-900750",pos:{lat:54.897173634583,lng:-6.3850567012357}},{id:"141-945169",pos:{lat:54.857688382212,lng:-6.4305049011039}},{id:"141-974595",pos:{lat:54.949729634569,lng:-6.3354524832804}},{id:"119-19183065",pos:{lat:54.817852,lng:-6.245113}},{id:"106-19451130",pos:{lat:54.843849,lng:-6.236385}},{id:"27-19483681",pos:{lat:54.910186,lng:-6.3149}},{id:"149-743772",pos:{lat:54.889684250961,lng:-6.2799739227539}},{id:"149-800728",pos:{lat:54.84017940005,lng:-6.2857274478301}},{id:"149-850377",pos:{lat:54.8564415,lng:-6.255617}},{id:"149-850378",pos:{lat:54.8564415,lng:-6.255617}},{id:"149-951342",pos:{lat:54.843991667033,lng:-6.2401899831787}},{id:"149-966100",pos:{lat:54.881151210261,lng:-6.2631379950317}},{id:"94-157952",pos:{lat:54.867817,lng:-6.2693262}},{id:"149-992082",pos:{lat:54.8564415,lng:-6.255617}},{id:"151-P3600A504",pos:{lat:54.8520575,lng:-6.2394886}},{id:"141-997116",pos:{lat:54.866996671966,lng:-6.1701741226546}},{id:"59-HIBMHIBM4626",pos:{lat:54.8681633,lng:-6.2707687}},{id:"27-19534865",pos:{lat:54.946056,lng:-6.340649}},{id:"151-P3600A521",pos:{lat:54.8736431,lng:-6.3555075}},{id:"59-HIBMHIBM4875",pos:{lat:54.8584568,lng:-6.5219741}},{id:"27-19535700",pos:{lat:54.855564,lng:-6.435227}},{id:"149-1009921",pos:{lat:54.860993370782,lng:-6.2986430839682}},{id:"27-19516657",pos:{lat:55.00761,lng:-6.344342}},{id:"27-19213242",pos:{lat:54.895259,lng:-6.198946}},{id:"141-1013985",pos:{lat:54.885014940367,lng:-6.2771909417649}},{id:"149-1013639",pos:{lat:54.8652935,lng:-6.2802213}},{id:"27-19549620",pos:{lat:54.865299,lng:-6.302931}},{id:"27-19553386",pos:{lat:54.880355,lng:-6.238303}},{id:"111-19558996",pos:{lat:54.8152,lng:-6.328235}},{id:"27-19514793",pos:{lat:54.928272,lng:-6.299645}},{id:"59-HIBMHIBM4622",pos:{lat:54.8853193,lng:-6.2772624}},{id:"59-HIBMHIBM4972",pos:{lat:54.9078698,lng:-6.2401014}},{id:"141-1018248",pos:{lat:54.890757987934,lng:-6.3990786943011}},{id:"59-HIBMHIBM4996",pos:{lat:54.8732628,lng:-6.2716919}},{id:"149-1020714",pos:{lat:54.871037054432,lng:-6.2829048496943}},{id:"27-19562789",pos:{lat:54.836639,lng:-6.230745}},{id:"106-19563873",pos:{lat:54.904808,lng:-6.350926}},{id:"59-HIBMHIBM4992",pos:{lat:54.8763572,lng:-6.2930514}},{id:"141-1022655",pos:{lat:54.868107579219,lng:-6.2747125209445}},{id:"59-HIBMHIBM2578",pos:{lat:54.8971874,lng:-6.4742927}},{id:"1-18451660",pos:{lat:54.85604,lng:-6.276203}},{id:"141-1024801",pos:{lat:54.887123156161,lng:-6.2793496884838}},{id:"11-MBL670615",pos:{lat:54.8736045816218,lng:-6.28370813967285}},{id:"151-P3600A559",pos:{lat:54.8560319,lng:-6.2561142}},{id:"39-HCLC1A10005853",pos:{lat:54.9663656,lng:-5.9537102}},{id:"141-1033299",pos:{lat:54.860361442746,lng:-6.2727533462809}},{id:"151-P3600A567",pos:{lat:54.8506702,lng:-6.2996775}},{id:"149-1034639",pos:{lat:54.8564415,lng:-6.255617}},{id:"27-19616536",pos:{lat:54.911437,lng:-6.309088}},{id:"119-19536748",pos:{lat:54.856884,lng:-6.258341}},{id:"149-1037468",pos:{lat:54.899265879995,lng:-6.1525467871887}},{id:"149-1038989",pos:{lat:54.875422298097,lng:-6.2808228141672}},{id:"27-19639354",pos:{lat:54.859191,lng:-6.274128}},{id:"141-1040498",pos:{lat:54.86081384234,lng:-6.3057040578244}},{id:"141-1041465",pos:{lat:54.885042478525,lng:-6.2771733406533}},{id:"3-LBR251709",pos:{lat:54.916285,lng:-6.345653}},{id:"39-HCLC1A10005893",pos:{lat:54.9381059,lng:-5.984088}},{id:"141-1042157",pos:{lat:54.806346386403,lng:-6.21566989488}},{id:"39-HCLC1A10005908",pos:{lat:54.9899929,lng:-5.9931293}},{id:"45-JMS670879",pos:{lat:54.9303962006767,lng:-6.33056296193237}},{id:"141-1043066",pos:{lat:54.86693950237,lng:-6.2874551689448}},{id:"149-1043456",pos:{lat:54.8564415,lng:-6.255617}},{id:"3-LBR250622",pos:{lat:55.087394,lng:-6.056046}},{id:"27-19649684",pos:{lat:54.895122,lng:-6.202886}},{id:"141-1043955",pos:{lat:54.844891049059,lng:-6.2928915152438}},{id:"11-MBL670665",pos:{lat:54.8735903557153,lng:-6.28372661817702}},{id:"151-P3600A579",pos:{lat:54.9895951,lng:-6.1973346}},{id:"59-HIBMHIBM5187",pos:{lat:54.8792079,lng:-6.2671207}},{id:"151-P3600A581",pos:{lat:54.8053915,lng:-6.2178322}},{id:"27-19649894",pos:{lat:54.892105,lng:-6.21586}},{id:"151-P3600A582",pos:{lat:54.8780923,lng:-6.3033372}},{id:"151-P3600A583",pos:{lat:54.8687015,lng:-6.2680778}},{id:"27-19645743",pos:{lat:54.913043,lng:-6.155658}},{id:"59-HIBMHIBM5190",pos:{lat:54.8593178,lng:-6.2718372}},{id:"141-1045482",pos:{lat:54.886113913924,lng:-6.3687890453449}},{id:"59-HIBMHIBM5169",pos:{lat:54.8567491,lng:-6.2764804}},{id:"27-19582118",pos:{lat:54.854705,lng:-6.300767}},];

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