import "./leaflet.js"; // window.L
const options = {
  lang: "en_US",
  offs: 0,
  viewportPadding: 20,
  boundsPadding: 0.1,
}
const defaultPolyStyling = {
  color: "#000000",
  opacity: 1,
  fill: true,
  fillOpacity: 0.25,
  weight: 3
};

function moveBounds(polys, xoff = 0, yoff = xoff) {
  return polys.map(([x, y]) => [y + yoff, x + xoff]);
}

// Get tile data

async function getTileData(floor) {
  let tileDataReq = await fetch(`/data/${options.lang}/map/${floor}`);
  let tileData;
  if (tileDataReq.ok)
    tileData = await tileDataReq.json();

  return tileData.map((room) =>
    L.polygon(moveBounds(room.poly, options.offs), defaultPolyStyling)
  );
}

// Get floor data

async function getFloorData() {
  let floorDataReq = await fetch(`/data/${options.lang}/map/`);
  let floorData;
  if (floorDataReq.ok)
    floorData = await floorDataReq.json();

  // Add to Leaflet

  const floors = await Promise.all(floorData.map(async (data) => {
    const tileData = await getTileData(data.id);

    const floorPoly = L.polygon(moveBounds(data.poly, options.offs), defaultPolyStyling)

    return L.featureGroup([
      floorPoly,
      ...tileData
    ]);
  }));

  return {
    layers: floorData,
    floors: floors
  }
}

// Create map

async function createMap() {
  const data = await getFloorData();

  let map = L.map('leaflet-map', {
    center: [0, 0],
    zoom: 2,
    crs: L.CRS.Simple
  });

  const mainLayer = L.tileLayer('', {
    maxZoom: 4,
    minZoom: 1,
    attribution: 'Test data'
  }).addTo(map);

  const floor = data.floors[0].addTo(map);
  const layerBounds = floor.getBounds();

  const blb = layerBounds.pad(options.boundsPadding);

  map.setMaxBounds(blb);

  map.fitBounds(layerBounds, { padding: [options.viewportPadding, options.viewportPadding] });

  const entries = Object.fromEntries(data.floors.map((floor, i) => [
    `${data.layers[i].name}`,
    floor
  ]));

  let layerControl = L.control.layers(entries).addTo(map);

  return {
    floors: data.floors,
    map,
    mainLayer
  };
}

async function mainFunction() {
  const { floors, map, mainLayer } = await createMap();

  map.on('baselayerchange', ({ layer, name }) => {
    const layerBounds = layer.getBounds();

    const blb = layerBounds.pad(options.boundsPadding);

    map.setMaxBounds(blb);

    map.fitBounds(layerBounds, { padding: [options.viewportPadding, options.viewportPadding] });
  });
}

mainFunction();