import { algoliasearch } from "algoliasearch";
import { info } from "autoprefixer";
import instantsearch from "instantsearch.js";
import { searchBox, hits, configure } from "instantsearch.js/es/widgets";
const MAPS_KEY = "AIzaSyCtS6CiOrG95FhroSUdDJJokItndcMkrgc";
const ALGOLIA_KEY = "9fb3db0222f7b5aef0e2b30791ee6201";
const INDEX_NAME = "pubfinder";
const client = algoliasearch("YSWWVAX5RB", ALGOLIA_KEY);

let markers = [];

const algolia_params = {
  hitsPerPage: 1000,
};

// const search = instantsearch({
//   indexName: INDEX_NAME,
//   searchClient,
//   // onStateChange({ uiState, setUiState }) {
//   //   setUiState(uiState);
//   // },
//   // probably want to set initial search state depending on the rectangle coords
// });

// cons

// search.addWidgets([
//   searchBox({
//     container: "#searchbox",
//   }),
//   hits({
//     container: "#hits",
//   }),
//   configure({}),
// ]);

let map;

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() {
  console.log("hi");
  for (let i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
}

async function initMap() {
  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,
    },
  });

  const rectangle = new Rectangle({
    bounds: london_bounds,
    editable: true,
    draggable: true,
  });

  rectangle.setMap(map);

  rectangle.addListener("bounds_changed", async function () {
    removeMarkers();
    const { south, west, north, east } = rectangle.getBounds()?.toJSON();
    const algolia_bounds = [north, east, south, west];

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

    res.hits.forEach((hit) => {
      console.log("hitting again");
      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);
    });
  });
}

initMap();