const propertiesArray = [{id:"5-RBWNRBWN4231",pos:{lat:54.6177834522541,lng:-5.80728025552018}},{id:"13-TRHTRH42369",pos:{lat:54.6343582727937,lng:-5.83062036770631}},{id:"5-RBWNRBWN4572",pos:{lat:54.6450677,lng:-5.8059946}},{id:"5-RBWNRBWN4509",pos:{lat:54.639671731018,lng:-5.82001237838687}},{id:"5-RBWNRBWN4568",pos:{lat:54.6401796712996,lng:-5.81802194564712}},{id:"18-CNRCJBE2215",pos:{lat:54.6573143140296,lng:-5.80170055478424}},{id:"3-HXO240319",pos:{lat:54.641385,lng:-5.829557}},{id:"3-HXO240282",pos:{lat:54.654661,lng:-5.799577}},{id:"3-LBR240002",pos:{lat:54.661062,lng:-5.794079}},{id:"3-HXO240189",pos:{lat:54.645396,lng:-5.819295}},{id:"3-HXO240180",pos:{lat:54.643041,lng:-5.793077}},{id:"18-CNRCJBE2691",pos:{lat:54.6443237668366,lng:-5.81302181167602}},{id:"5-RBWNRBWN4628",pos:{lat:54.6411489367679,lng:-5.82871913909912}},{id:"3-HLW240173",pos:{lat:54.637139,lng:-5.840728}},{id:"3-HLW240172",pos:{lat:54.637139,lng:-5.840728}},{id:"20-cnj660911",pos:{lat:54.645325,lng:-5.818361}},{id:"3-HLW250088",pos:{lat:54.650544,lng:-5.82159}},{id:"3-HLW240187",pos:{lat:54.636624,lng:-5.838979}},{id:"3-HLW240079",pos:{lat:54.636866,lng:-5.839408}},{id:"3-HLW240003",pos:{lat:54.639113,lng:-5.826805}},{id:"3-HLW240181",pos:{lat:54.637139,lng:-5.840728}},{id:"18-CNRCJBE2808",pos:{lat:54.6438555878251,lng:-5.82947149430779}},{id:"18-CNRCJBE2805",pos:{lat:54.6438555878251,lng:-5.82947149430779}},{id:"18-CNRCJBE2812",pos:{lat:54.6573527856161,lng:-5.79456821365356}},{id:"18-CNRCJBE2826",pos:{lat:54.6584196925877,lng:-5.79212191538274}},{id:"5-RBWNRBWN4788",pos:{lat:54.6556360163223,lng:-5.79891843144055}},{id:"13-TRHTRH100509",pos:{lat:54.647921,lng:-5.816796}},{id:"5-RBWNRBWN4751",pos:{lat:54.636961196939,lng:-5.83800252475672}},{id:"3-HLW250246",pos:{lat:54.655183,lng:-5.812529}},{id:"13-TRHTRH100498",pos:{lat:54.656600028559,lng:-5.79754168842948}},{id:"18-CNRCJBE2851",pos:{lat:54.6550259373695,lng:-5.80070244783762}},{id:"5-RBWNRBWN4805",pos:{lat:54.6385457626356,lng:-5.82539778549344}},{id:"3-HLW250263",pos:{lat:54.654164,lng:-5.796289}},{id:"5-RBWNRBWN4792",pos:{lat:54.6602411013234,lng:-5.79705822091174}},{id:"13-TRHTRH100557",pos:{lat:54.627043,lng:-5.841467}},{id:"9-JMHJMH25965",pos:{lat:54.64146,lng:-5.833594}},{id:"13-TRHTRH39867",pos:{lat:54.646822,lng:-5.819133}},{id:"18-CNRCJBE2855",pos:{lat:54.6546662183612,lng:-5.79895600083979}},{id:"18-CNRCJBE2849",pos:{lat:54.6545971147139,lng:-5.79870954437255}},{id:"3-HLW250301",pos:{lat:54.654661,lng:-5.799577}},{id:"3-HLW250276",pos:{lat:54.642923,lng:-5.832842}},{id:"5-RBWNRBWN4836",pos:{lat:54.6386707613822,lng:-5.8152202144776}},{id:"5-RBWNRBWN4816",pos:{lat:54.6178231355181,lng:-5.82199062722719}},{id:"9-18623832",pos:{lat:54.640903,lng:-5.841842}},{id:"9-18621286",pos:{lat:54.658134,lng:-5.775074}},{id:"3-HLW250371",pos:{lat:54.648982,lng:-5.821653}},{id:"5-RBWNRBWN4869",pos:{lat:54.6173718342296,lng:-5.82454684880918}},{id:"5-RBWNRBWN4872",pos:{lat:54.6173718342296,lng:-5.82454684880918}},{id:"3-HLW240256",pos:{lat:54.657367,lng:-5.795697}},{id:"3-HLW250135",pos:{lat:54.652012,lng:-5.816414}},{id:"3-HLW250395",pos:{lat:54.641472,lng:-5.812938}},{id:"3-HLW240014",pos:{lat:54.654478,lng:-5.784152}},{id:"13-TRHTRH101341",pos:{lat:54.617897,lng:-5.822028}},{id:"13-TRHTRH41774",pos:{lat:54.63893,lng:-5.828943}},{id:"69-BAL250426",pos:{lat:54.625388,lng:-5.839049}},{id:"9-18689520",pos:{lat:54.661174,lng:-5.767858}},{id:"3-HLW250460",pos:{lat:54.654818,lng:-5.790629}},{id:"9-18630633",pos:{lat:54.660579,lng:-5.770506}},{id:"5-RBWNRBWN4921",pos:{lat:54.6403117,lng:-5.8426032}},{id:"2-BEL18335",pos:{lat:54.6547332,lng:-5.7906059}},{id:"3-HLW250461",pos:{lat:54.64201,lng:-5.826949}},{id:"9-18620034",pos:{lat:54.657947,lng:-5.77107}},{id:"1-18473952",pos:{lat:54.655109,lng:-5.78115}},{id:"5-RBWNRBWN4926",pos:{lat:54.6525946479568,lng:-5.76639469310724}},{id:"1-18447131",pos:{lat:54.65607,lng:-5.764481}},{id:"3-HLW240175",pos:{lat:54.637139,lng:-5.840728}},{id:"3-HLW250444",pos:{lat:54.642282,lng:-5.826817}},{id:"13-TRHTRH59825",pos:{lat:54.6413266452188,lng:-5.82935914678573}},{id:"7-17699679",pos:{lat:54.65343,lng:-5.79675}},{id:"9-18635879",pos:{lat:54.65649,lng:-5.800786}},{id:"1-18180862",pos:{lat:54.650066,lng:-5.806176}},{id:"3-HLW250514",pos:{lat:54.64914,lng:-5.809404}},{id:"9-18781454",pos:{lat:54.645301,lng:-5.81464}},{id:"5-RBWNRBWN4932",pos:{lat:54.6456982142318,lng:-5.81942831369764}},{id:"3-HLW250516",pos:{lat:54.65989,lng:-5.79812}},{id:"9-18659403",pos:{lat:54.619144,lng:-5.850335}},{id:"3-HLW250486",pos:{lat:54.638822,lng:-5.833543}},{id:"9-18715395",pos:{lat:54.636585,lng:-5.829074}},{id:"69-BAL250206",pos:{lat:54.620079,lng:-5.851191}},{id:"13-TRHTRH101833",pos:{lat:54.644312,lng:-5.810529}},{id:"3-HLW250457",pos:{lat:54.637597,lng:-5.832299}},{id:"5-RBWNRBWN4954",pos:{lat:54.6172455380456,lng:-5.80767807107842}},{id:"3-HLW250571",pos:{lat:54.646079,lng:-5.818452}},{id:"18-CNRCJBE2955",pos:{lat:54.6493136762305,lng:-5.81704047760133}},{id:"18-CNRCJBE2957",pos:{lat:54.6435868730169,lng:-5.80819818159364}},{id:"5-RBWNRBWN4651",pos:{lat:54.6434229062689,lng:-5.80792605857094}},{id:"5-RBWNRBWN4951",pos:{lat:54.6374992829584,lng:-5.81776701792701}},{id:"9-18620378",pos:{lat:54.642829,lng:-5.815927}},{id:"9-18849912",pos:{lat:54.635124,lng:-5.816733}},{id:"9-18796356",pos:{lat:54.635395,lng:-5.842622}},{id:"9-18828159",pos:{lat:54.621173,lng:-5.777607}},{id:"13-TRHTRH102039",pos:{lat:54.6436312505544,lng:-5.82925188868209}},{id:"1-18539048",pos:{lat:54.631275,lng:-5.840865}},{id:"9-18865873",pos:{lat:54.644477,lng:-5.813245}},{id:"3-LBR251036",pos:{lat:54.657803,lng:-5.795886}},{id:"13-TRHTRH101638",pos:{lat:54.639123,lng:-5.832201}},];

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