const json_files = [
  "tileconfig/osm.json",
  "tileconfig/mapycom.json",
  "tileconfig/praha.json"
];

const center = [50.08804, 14.42076];
const zoom = 14;

let syncing = false;

let TILE_SERVERS = [];

function fillDropdown(select) {
  for (const name in TILE_SERVERS) {
    const opt = document.createElement("option");
    opt.value = name;
    opt.textContent = name;
    select.appendChild(opt);
  }
}

function sync(source, target) {
  if (syncing) return;
  syncing = true;
  target.setView(source.getCenter(), source.getZoom(), { animate: false });
  syncing = false;
}

function setLayer(map, config, currentLayer) {
  if (currentLayer) map.removeLayer(currentLayer);

  if (config.type === "xyz") {
    return L.tileLayer(config.url, {
      maxZoom: 19,
      tileSize: 256,
      referrerPolicy: "strict-origin-when-cross-origin"
    }).addTo(map);
  }

  if (config.type === "wms") {
    return L.tileLayer.wms(config.url, {
      layers: config.layers,
      format: config.format || "image/png",
      transparent: config.transparent ?? true,
      version: config.version || "1.3.0",
      attribution: config.attribution || "",
      referrerPolicy: "strict-origin-when-cross-origin"
    }).addTo(map);
  }
}

function init() {
  fillDropdown(document.getElementById("select1"));
  fillDropdown(document.getElementById("select2"));

  // Create maps
  const map1 = L.map("map1", { center, zoom, zoomControl: false });
  const map2 = L.map("map2", { center, zoom, zoomControl: false });

  map1.on("move", () => sync(map1, map2));
  map2.on("move", () => sync(map2, map1));

  map1.on("zoom", () => sync(map1, map2));
  map2.on("zoom", () => sync(map2, map1));

  L.control.zoom({ position: "topright" }).addTo(map1);
  L.control.zoom({ position: "topright" }).addTo(map2);

  // Active tile layers
  let layer1 = null;
  let layer2 = null;

  // Initialize with first server
  layer1 = setLayer(map1, TILE_SERVERS[document.getElementById("select1").value], layer1);
  layer2 = setLayer(map2, TILE_SERVERS[document.getElementById("select2").value], layer2);

  // Dropdown change handlers
  document.getElementById("select1").addEventListener("change", e => {
    const key = e.target.value;   
    layer1 = setLayer(map1, TILE_SERVERS[key], layer1);      
  });

  document.getElementById("select2").addEventListener("change", e => {
    const key = e.target.value;
    layer2 = setLayer(map2, TILE_SERVERS[key], layer2);
  });
}

async function loadTileConfigs(json_files) {
  const results = await Promise.all(
    json_files.map(f => fetch(f).then(r => r.json()))
  );

  // Merge all JSON objects into TILE_SERVERS
  results.forEach(obj => Object.assign(TILE_SERVERS, obj));
}

loadTileConfigs(json_files).then(() => {
  init();
});