const propertiesArray = [{id:"1-17569157",pos:{lat:54.590656,lng:-5.689624}},{id:"1-17867938",pos:{lat:54.60099,lng:-5.689859}},{id:"1-18006869",pos:{lat:54.615741,lng:-5.730949}},{id:"1-17400715",pos:{lat:54.582836,lng:-5.585437}},{id:"9-JMDJMB16620",pos:{lat:54.593559,lng:-5.688755}},{id:"9-JMDJMD23263",pos:{lat:54.437351,lng:-5.471957}},{id:"13-TRHTRH71947",pos:{lat:54.6171,lng:-5.71296}},{id:"56-18590424",pos:{lat:54.595329,lng:-5.66934}},{id:"56-18765731",pos:{lat:54.487419,lng:-5.533044}},{id:"1-18131301",pos:{lat:54.606357,lng:-5.701808}},{id:"1-18129662",pos:{lat:54.49179,lng:-5.785073}},{id:"34-TORTOR4445",pos:{lat:54.6153319891769,lng:-5.7309805720387}},{id:"3-HXO240102",pos:{lat:54.604589,lng:-5.726683}},{id:"3-HXO240076",pos:{lat:54.57264,lng:-5.718996}},{id:"131-BAIL0A25",pos:{lat:54.6084171,lng:-5.53263220000001}},{id:"131-BAIL0A72",pos:{lat:54.4549502,lng:-5.4418826}},{id:"131-BAIL0A73",pos:{lat:54.4549502,lng:-5.4418826}},{id:"13-TRETRH70348",pos:{lat:54.603086,lng:-5.738885}},{id:"1-18197087",pos:{lat:54.588665,lng:-5.533513}},{id:"85-POOL0A106926",pos:{lat:54.5920212,lng:-5.6906763}},{id:"1-18248962",pos:{lat:54.595844,lng:-5.708404}},{id:"13-TRHTRH99922",pos:{lat:54.6003274713336,lng:-5.66586556867813}},{id:"1-17748176",pos:{lat:54.551628,lng:-5.760712}},{id:"131-BAIL0A309",pos:{lat:54.436618,lng:-5.4831232}},{id:"1-18325608",pos:{lat:54.49179,lng:-5.785073}},{id:"9-JMDJMD6449",pos:{lat:54.563766,lng:-5.597447}},{id:"26-PTRPTR10402",pos:{lat:54.5951864979129,lng:-5.69097199913936}},{id:"69-NEW250065",pos:{lat:54.594856,lng:-5.697893}},{id:"131-BAIL0A315",pos:{lat:54.5923097,lng:-5.5175459}},{id:"131-BAIL0A314",pos:{lat:54.6077893201246,lng:-5.53181128643875}},{id:"26-PTRPTR10422",pos:{lat:54.5959265452892,lng:-5.68660909999338}},{id:"34-TORTOR4579",pos:{lat:54.5792826291631,lng:-5.57278429558497}},{id:"131-BAIL0A318",pos:{lat:54.4983464277646,lng:-5.46386361122131}},{id:"1-18346004",pos:{lat:54.567996,lng:-5.650053}},{id:"5-RBWNRBWN4800",pos:{lat:54.6038332667382,lng:-5.70179900150738}},{id:"1-18345357",pos:{lat:54.5839,lng:-5.674006}},{id:"3-NTN250093",pos:{lat:54.560728,lng:-5.627509}},{id:"3-NTN250204",pos:{lat:54.597164,lng:-5.653654}},{id:"1-18389369",pos:{lat:54.605545,lng:-5.741417}},{id:"1-18391323",pos:{lat:54.574405,lng:-5.665191}},{id:"9-18613345",pos:{lat:54.533454,lng:-5.532747}},{id:"26-PTRPTR10553",pos:{lat:54.6057941133691,lng:-5.71043793631399}},{id:"26-PTRPTR10557",pos:{lat:54.5989461575088,lng:-5.71477187728305}},{id:"20-cnj828984",pos:{lat:54.5984088,lng:-5.6884047}},{id:"34-TORTOR4603",pos:{lat:54.6202969680678,lng:-5.67644372863769}},{id:"131-BAIL0A340",pos:{lat:54.4668185293536,lng:-5.44311647459106}},{id:"69-BNI250314",pos:{lat:54.582581,lng:-5.672793}},{id:"9-18612604",pos:{lat:54.593467,lng:-5.689082}},{id:"3-NTN250252",pos:{lat:54.600656,lng:-5.728512}},{id:"34-TORTOR4605",pos:{lat:54.5762963386709,lng:-5.52851453704833}},{id:"9-18611147",pos:{lat:54.587009,lng:-5.714668}},{id:"56-19495795",pos:{lat:54.599575,lng:-5.715771}},{id:"131-BAIL0A343",pos:{lat:54.6017476,lng:-5.536666}},{id:"1-18176054",pos:{lat:54.480392,lng:-5.500228}},{id:"1-18425173",pos:{lat:54.60604,lng:-5.696816}},{id:"1-10089529",pos:{lat:54.591819,lng:-5.691795}},{id:"26-PTRPTR10590",pos:{lat:54.5589519,lng:-5.5506588}},{id:"65-19562869",pos:{lat:54.486351,lng:-5.513768}},{id:"26-PTRPTR10591",pos:{lat:54.5944112,lng:-5.6589869}},{id:"105-66d2d4757cb14afcbec7748217ef9381",pos:{lat:54.5487085,lng:-5.7519537}},{id:"131-BAIL0A353",pos:{lat:54.6054977,lng:-5.5335901}},{id:"1-18433392",pos:{lat:54.596752,lng:-5.686197}},{id:"84-POOL1A107188",pos:{lat:54.5478939,lng:-5.8198396}},{id:"1-18509548",pos:{lat:54.594581,lng:-5.696713}},{id:"1-18504074",pos:{lat:54.471916,lng:-5.674273}},{id:"1-18475824",pos:{lat:54.589336,lng:-5.69785}},{id:"3-NTN250329",pos:{lat:54.59365,lng:-5.678271}},{id:"137-101253013922",pos:{lat:54.593378,lng:-5.6909642}},{id:"1-18495525",pos:{lat:54.607975,lng:-5.681369}},{id:"9-18846000",pos:{lat:54.601356,lng:-5.689184}},{id:"3-HLW250587",pos:{lat:54.601382,lng:-5.690623}},{id:"3-NTN250400",pos:{lat:54.601382,lng:-5.690623}},{id:"9-18864939",pos:{lat:54.601356,lng:-5.689184}},{id:"3-NTN250398",pos:{lat:54.601382,lng:-5.690623}},{id:"3-HLW250612",pos:{lat:54.601382,lng:-5.690623}},{id:"9-18864913",pos:{lat:54.601356,lng:-5.689184}},{id:"9-18864917",pos:{lat:54.601356,lng:-5.689184}},{id:"131-BAIL0A366",pos:{lat:54.6054977,lng:-5.5335901}},{id:"1-18471666",pos:{lat:54.599296,lng:-5.667936}},{id:"3-NTN250317",pos:{lat:54.594398,lng:-5.681085}},{id:"3-NTN250407",pos:{lat:54.600423,lng:-5.68746}},{id:"34-TORTOR4652",pos:{lat:54.6418953260667,lng:-5.55826011181541}},{id:"131-BAIL0A371",pos:{lat:54.4952514,lng:-5.5067499}},{id:"178-1042355",pos:{lat:54.603863007478,lng:-5.7092747222756}},{id:"37-19639219",pos:{lat:54.58942,lng:-5.556696}},{id:"1-17053185",pos:{lat:54.603305,lng:-5.694993}},{id:"1-18562540",pos:{lat:54.59402,lng:-5.668602}},{id:"131-BAIL0A376",pos:{lat:54.5466273,lng:-5.4870022}},{id:"1-18530997",pos:{lat:54.610034,lng:-5.528514}},{id:"74-19337676",pos:{lat:54.608623,lng:-5.702012}},{id:"1-18520413",pos:{lat:54.57999,lng:-5.672571}},{id:"1-18575728",pos:{lat:54.604324,lng:-5.692671}},{id:"137-101253014234",pos:{lat:54.5241,lng:-5.79986}},{id:"3-LBR251018",pos:{lat:53.278051,lng:-2.753442}},{id:"34-TORTOR4661",pos:{lat:54.5819105995834,lng:-5.69924428061932}},{id:"26-PTRPTR10673",pos:{lat:54.5990641476909,lng:-5.66008841020667}},{id:"137-101253014264",pos:{lat:54.5241,lng:-5.79986}},{id:"3-HLW260080",pos:{lat:54.601382,lng:-5.690623}},{id:"3-HLW260078",pos:{lat:54.601382,lng:-5.690623}},{id:"3-HLW260079",pos:{lat:54.601382,lng:-5.690623}},{id:"3-HLW250613",pos:{lat:54.601382,lng:-5.690623}},{id:"9-18986468",pos:{lat:54.601356,lng:-5.689184}},{id:"9-18986481",pos:{lat:54.601356,lng:-5.689184}},{id:"9-18986464",pos:{lat:54.601356,lng:-5.689184}},{id:"69-NEW250188",pos:{lat:54.591658,lng:-5.671657}},{id:"3-HLW260084",pos:{lat:54.597269,lng:-5.653365}},{id:"3-HLW260086",pos:{lat:54.597269,lng:-5.653365}},{id:"1-17876447",pos:{lat:54.607295,lng:-5.544368}},{id:"1-17339388",pos:{lat:54.599304,lng:-5.687989}},{id:"34-TORTOR4668",pos:{lat:54.602695097997,lng:-5.67150116614702}},{id:"1-10110975",pos:{lat:54.585514,lng:-5.674687}},{id:"3-HLW260098",pos:{lat:54.603566,lng:-5.659666}},{id:"26-PTRPTR10689",pos:{lat:54.6005320699847,lng:-5.67296348137207}},{id:"137-101253014316",pos:{lat:54.589257,lng:-5.7179676}},{id:"137-101253014317",pos:{lat:54.5887785,lng:-5.7179008}},{id:"3-HLW260101",pos:{lat:54.590031,lng:-5.717958}},{id:"3-HLW250389",pos:{lat:54.590031,lng:-5.717958}},{id:"13-TRHTRH70689",pos:{lat:54.6007570067229,lng:-5.75373167580398}},{id:"131-BAIL0A365",pos:{lat:54.4978366,lng:-5.4649361}},{id:"56-19679876",pos:{lat:54.606464,lng:-5.673014}},{id:"26-PTRPTR10691",pos:{lat:54.5900822870169,lng:-5.6973025581358}},{id:"26-PTRPTR10692",pos:{lat:54.5960384192453,lng:-5.6992532151717}},{id:"1-17962772",pos:{lat:54.603706,lng:-5.671673}},{id:"3-NTN260012",pos:{lat:54.602626,lng:-5.709702}},{id:"26-PTRPTR10694",pos:{lat:54.5946580194677,lng:-5.6793651070547}},{id:"13-TRHTRH102525",pos:{lat:54.6082427,lng:-5.7099022}},{id:"69-NEW260065",pos:{lat:54.597644,lng:-5.672617}},{id:"69-NEW250040",pos:{lat:54.602526,lng:-5.686387}},{id:"137-101253014160",pos:{lat:54.5957,lng:-5.68768}},{id:"9-18723476",pos:{lat:54.594291,lng:-5.677119}},{id:"1-18607773",pos:{lat:54.479728,lng:-5.652321}},{id:"1-18617263",pos:{lat:54.584259,lng:-5.674053}},{id:"1-18617267",pos:{lat:54.584259,lng:-5.674053}},{id:"3-NTN260047",pos:{lat:54.594364,lng:-5.684923}},{id:"3-NTN250133",pos:{lat:54.592409,lng:-5.713721}},{id:"1-18614549",pos:{lat:54.591735,lng:-5.705731}},{id:"131-BAIL0A387",pos:{lat:54.6093299,lng:-5.5287203}},{id:"1-18603229",pos:{lat:54.502593,lng:-5.789227}},{id:"3-NTN260003",pos:{lat:54.605166,lng:-5.645936}},{id:"69-NEW260077",pos:{lat:54.600149,lng:-5.709149}},];

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