var map;
var viewportMarkers = [];
var infoWindow;
var markerCount = 1;
var EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];
var polygons = {};

function xyzToBounds1(x, y, z) {
  var tileSize = (EXTENT[1] * 2) / Math.pow(2, z);

  var minx = EXTENT[0] + x * tileSize;
  var maxx = EXTENT[0] + (x + 1) * tileSize;
  var miny = EXTENT[1] - (y + 1) * tileSize;
  var maxy = EXTENT[1] - y * tileSize;

  return [minx, miny, maxx, maxy];
}

var styleArray = [
  {
    featureType: "poi",
    elementType: "all",
    stylers: [{ visibility: "off" }]
  }
];

var getTileUrl = function (coordinates, zoom) {
  return (
    "https://zbgisws.skgeodesy.sk/zbgis_ortofoto_wms/service.svc/get?request=GetMap&service=WMS&format=image%2Fpng&layers=1&width=256&height=256&version=1.3.0&styles=default&crs=EPSG:3857&bbox=" +
    xyzToBounds1(coordinates.x, coordinates.y, zoom).join(",")
  );
};

function initMap() {
  var savedLat = localStorage.getItem("mapLat");
  var savedLng = localStorage.getItem("mapLng");
  var savedZoom = localStorage.getItem("mapZoom");

  var defaultLat = 48.554512;
  var defaultLng = 19.586831;
  var defaultZoom = 7;

  var lat = savedLat ? parseFloat(savedLat) : defaultLat;
  var lng = savedLng ? parseFloat(savedLng) : defaultLng;
  var iniZoom = savedZoom ? parseInt(savedZoom) : defaultZoom;

  var myLatLng = new google.maps.LatLng(lat, lng);

  var options = {
    zoom: iniZoom,
    minZoom: 7,
    maxZoom: 21,
    controlSize: 22,
    center: myLatLng,
    mapTypeId: "orto",
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_LEFT,
      mapTypeIds: ["roadmap", "satellite", "hybrid", "orto"]
    },
    styles: styleArray,
    streetViewControl: true,
    fullscreenControl: true,
    gestureHandling: "greedy"
  };

  map = new google.maps.Map(document.getElementById("mapInz1"), options);

  const ortoMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      return getTileUrl(coord, zoom);
    },
    tileSize: new google.maps.Size(256, 256),
    name: "Ortofoto",
    maxZoom: 21
  });

  map.mapTypes.set("orto", ortoMapType);


      if (!polygons[0000005]) {
        polygons[0000005] = [];
      }

      var poly = new google.maps.Polygon({
        paths: [[{ lat: 48.91504337574, lng: 18.734271362061 },{ lat: 48.915598210976, lng: 18.733765699034 },{ lat: 48.915684749123, lng: 18.733961495403 },{ lat: 48.91577600547, lng: 18.73419723815 },{ lat: 48.915873572979, lng: 18.734426057251 },{ lat: 48.915930533674, lng: 18.734560419576 },{ lat: 48.915362605694, lng: 18.735077929098 },{ lat: 48.91504337574, lng: 18.734271362061 }],],
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 1.75,
        fillOpacity: 0.3
      });

      var bounds = new google.maps.LatLngBounds();

      poly.getPath().forEach(function(p) {
        bounds.extend(p);
      });

      poly.center = bounds.getCenter();

      polygons[0000005].push(poly);

      if (map.getZoom() >= 14) {
        poly.setMap(map);
      } else {
        poly.setMap(null);
      }

      google.maps.event.addListener(map, 'zoom_changed', function() {
        poly.setMap(map.getZoom() >= 14 ? map : null);
      });
    
      if (!polygons[0000006]) {
        polygons[0000006] = [];
      }

      var poly = new google.maps.Polygon({
        paths: [[{ lat: 49.07563899263, lng: 18.954597893125 },{ lat: 49.075967708086, lng: 18.954559671065 },{ lat: 49.076025238263, lng: 18.956706319948 },{ lat: 49.075677141289, lng: 18.956730459585 },{ lat: 49.07563899263, lng: 18.954597893125 }],],
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 1.75,
        fillOpacity: 0.3
      });

      var bounds = new google.maps.LatLngBounds();

      poly.getPath().forEach(function(p) {
        bounds.extend(p);
      });

      poly.center = bounds.getCenter();

      polygons[0000006].push(poly);

      if (map.getZoom() >= 14) {
        poly.setMap(map);
      } else {
        poly.setMap(null);
      }

      google.maps.event.addListener(map, 'zoom_changed', function() {
        poly.setMap(map.getZoom() >= 14 ? map : null);
      });
    
  google.maps.event.addListener(map, "dragend", showMarkersInViewport);

  google.maps.event.addListener(map, "idle", function () {
    showMarkersInViewport();

    var center = map.getCenter();
    localStorage.setItem("mapLat", center.lat());
    localStorage.setItem("mapLng", center.lng());
    localStorage.setItem("mapZoom", map.getZoom());
  });

  function highlightMapType() {
    const currentType = map.getMapTypeId();
    const buttons = document.querySelectorAll('.gm-style-mtc button');

    buttons.forEach(btn => {
      btn.classList.remove('active-map');

      const text = btn.textContent.trim().toLowerCase();

      if (
        (currentType === 'roadmap' && text.includes('mapa')) ||
        ((currentType === 'satellite' || currentType === 'hybrid') &&
          (text.includes('satelit') || text.includes('hybrid'))) ||
        (currentType === 'orto' && text.includes('orto'))
      ) {
        btn.classList.add('active-map');
      }
    });
  }

  function waitForMapButtons() {
    const buttons = document.querySelectorAll('.gm-style-mtc button');

    if (buttons.length > 0) {
      highlightMapType();
    } else {
      setTimeout(waitForMapButtons, 100);
    }
  }

  waitForMapButtons();

  map.addListener('maptypeid_changed', highlightMapType);
}

function showMarkersInViewport() {
  if (viewportMarkers != null) {
    for (let i = 0; i < viewportMarkers.length; i++) {
      viewportMarkers[i].setMap(null);
    }

    viewportMarkers = [];

    google.maps.event.addListener(map, "click", function () {
      if (infoWindow) infoWindow.close();
    });
  }

  let divTable = '<div id="tbl">';
  const lotsInViewport = getLots(map.getBounds());

  if (!lotsInViewport) return;

  const shownAdvs = new Set();

  for (let i = 0; i < lotsInViewport.length; i++) {

    const lot = lotsInViewport[i];
    const advId = lot.idAdv;

    const circleIcon = {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: "#ff3333",
      fillOpacity: 1,
      strokeColor: "#ffffff",
      strokeWeight: 2,
      scale: map.getZoom() < 12 ? 6 : 7
    };

    const marker = new google.maps.Marker({
      position: new google.maps.LatLng(lot.location.Latitude, lot.location.Longitude),
      icon: circleIcon,
      title: lot.cena,
      label: map.getZoom() >= 12 ? {
        text: lot.typAdv == 2 ? 'Súbor pozemkov' : lot.cena,
        className: lot.label
      } : undefined
    });

    marker.objInfo =
      '<a href="buyMapPopup.php?idAdv=' + advId + '"><div class="pop"><div style="margin:0 0 5px 0">' +
      lot.obec + "<br/>Cena: <b>" + lot.cena + "</b><br/>Rozloha: <b>" + lot.rozloha +
      '</b><br/></div><span style="background-image:url(\'../uploads_webp_thumb/' + lot.foto1 +
      '\');height:100px;display:flex;width:130px;background-position:center;background-size:cover"></span></div></a>';

    google.maps.event.addListener(marker, "click", function () {
      if (infoWindow != null) infoWindow.setMap(null);

      infoWindow = new google.maps.InfoWindow();
      infoWindow.setContent(marker.objInfo);
      infoWindow.open(map, marker);
    });

    marker.setMap(map);
    viewportMarkers.push(marker);

    const markerIndex = viewportMarkers.length - 1;

    if (!shownAdvs.has(advId)) {

      shownAdvs.add(advId);

      divTable += `
      <div class="advThumb"
        onmouseenter="highlightMarkerHover(${markerIndex})"
        onmouseleave="resetMarkerColor(${markerIndex})">

        <div id="${advId}" class="advThumb1"
          style="background-image:url('../uploads_webp_thumb/${lot.foto1}');">

          <div class="topLeftAdvThumb">${lot.dni}</div>

          <a href="javascript:highlightMarker(${markerIndex})">
            <div class="topRightAdvThumb1"><div class="favorite-btn"></div></div>
          </a>

          <div class="topRightAdvThumb2"><div class="favorite-btn"></div></div>
        </div>

        <a href="buyMapPopup.php?idAdv=${advId}">
          <div class="advThumb2">
            <div class="advThumb2-1 js">
              <div class="span1 js">
                <img src="/images/${lot.inzImg}">${lot.cena}
              </div>
              <div class="span2 je">${lot.cenaMeter}</div>
            </div>

            <div class="advThumb2-2 js">${lot.rozloha}</div>
            <div class="advThumb2-3 js">${lot.obec}, okres ${lot.okres}</div>
          </div>
        </a>

      </div>`;
    }
  }

  divTable += "</div>";

  document.getElementById("dataTable").innerHTML = divTable;
  document.getElementById("advCount").innerText = `${shownAdvs.size}`;
  document.getElementById("mobileAdvCount").innerText = `${shownAdvs.size}`;
}

function getLots(a) {
  if (!a) return null;

  var selected = [];

  for (i = 0; i < lots.length; i++) {
    if (
      a.contains(
        new google.maps.LatLng(
          lots[i].location.Latitude,
          lots[i].location.Longitude
        )
      )
    ) {
      selected.push(lots[i]);
    }
  }

  return selected;
}

function highlightMarker(index) {
  if (infoWindow != null) infoWindow.setMap(null);

  infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(viewportMarkers[index].objInfo);
  infoWindow.open(map, viewportMarkers[index]);

  viewportMarkers[index].setAnimation(google.maps.Animation.BOUNCE);

  setTimeout(function () {
    viewportMarkers[index].setAnimation(null);
  }, 4000);
}

function highlightMarkerHover(index) {
  if (viewportMarkers[index]) {
    viewportMarkers[index].setIcon({
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: "#ff8800",
      fillOpacity: 1,
      strokeColor: "#ffffff",
      strokeWeight: 2,
      scale: 9
    });
  }
}

function resetMarkerColor(index) {
  if (viewportMarkers[index]) {
    viewportMarkers[index].setIcon({
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: "#ff3333",
      fillOpacity: 1,
      strokeColor: "#ffffff",
      strokeWeight: 2,
      scale: map.getZoom() < 12 ? 6 : 7
    });
  }
}

function zoomMarker(index) {
  map.panTo(viewportMarkers[index].getPosition());
}

function backdropClose(event) {
  if (event.target.id === "advBigPopup") {
    closeAdvPopup();
  }
}