import { algoliasearch } from "algoliasearch";
const MAPS_KEY = "AIzaSyCtS6CiOrG95FhroSUdDJJokItndcMkrgc";
const ALGOLIA_KEY = "9fb3db0222f7b5aef0e2b30791ee6201";
const INDEX_NAME = "pubfinder";
const client = algoliasearch("YSWWVAX5RB", ALGOLIA_KEY);

// Elements
const polygonSelect = document.querySelector(".polygon");
const rectangleSelect = document.querySelector(".rectangle");

let markers = [];
let map;

const algolia_params = {
  hitsPerPage: 1000,
};

const initialPolygonCoords = [
  { lat: 51.555519, lng: -0.215208 },
  { lat: 51.526021, lng: -0.021665 },
  { lat: 51.454394, lng: -0.014601 },
  { lat: 51.425103, lng: -0.145876 },
  { lat: 51.514498, lng: -0.257455 },
];

const london_bounds = {
  north: 51.532,
  south: 51.478,
  east: -0.072,
  west: -0.16,
};

function removeMarkers() {
  for (let i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
}

async function initMap(shape) {
  const position = { lat: 51.508616, lng: -0.125319 };

  const { Map, Polygon, Rectangle, InfoWindow } =
    await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
    restriction: {
      latLngBounds: {
        north: 51.74,
        south: 51.27,
        west: -0.51,
        east: 0.23,
      },
      strictBounds: true,
    },
  });

  function handleBoundsChange(activeShape) {
    console.log("happening");
    removeMarkers();
    const { south, west, north, east } = activeShape.getBounds()?.toJSON();
    const algolia_bounds = [north, east, south, west];

    function debounce(func, delay) {
      let timer;
      return function (...args) {
        const context = this;
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(context, args);
        }, delay);
      };
    }

    async function getSearch() {
      const res = await client.searchSingleIndex({
        indexName: INDEX_NAME,
        searchParams: {
          ...algolia_params,
          insideBoundingBox: [algolia_bounds],
          attributesToRetrieve: ["_geoloc", "name"],
        },
      });

      res.hits.forEach((hit) => {
        const marker = new AdvancedMarkerElement({
          map: map,
          position: {
            lat: hit._geoloc.lat,
            lng: hit._geoloc.lng,
          },
        });

        const window = new InfoWindow({
          content: hit.name,
        });

        marker.addListener("click", function () {
          window.open({
            anchor: marker,
            map,
          });
        });

        markers.push(marker);
      });
    }

    const doAll = debounce(getSearch, 500);
    doAll();
  }

  if (shape === "rectangular") {
    console.log("doing");
    const rectangle = new Rectangle({
      bounds: london_bounds,
      editable: true,
      draggable: true,
    });

    rectangle.setMap(map);
    rectangle.addListener("bounds_changed", handleBoundsChange(rectangle));
  } else if (shape === "polygonular") {
    const polygon = new Polygon({
      paths: initialPolygonCoords,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      editable: true,
      draggable: true,
    });

    polygon.setMap(map);
    polygon.addListener("bounds_changed", handleBoundsChange(polygon));
  }
}

[rectangleSelect, polygonSelect].forEach((el) => {
  el.addEventListener("click", function (e) {
    if (e.target.classList.contains("rectangle")) {
      initMap("rectangular");
    } else {
      initMap("polygonular");
    }
  });
});

initMap("rectangular");