const minZoomForRequest = 17;
let markers = [];
function initMap(btn) {
  // Init map position/zoom. Potentially using what's in the URL search string.
  const params = new URLSearchParams(window.location.search);
  let x = parseFloat(params.get('x'));
  let y = parseFloat(params.get('y'));
  let z = parseInt(params.get('z'));
  let map = L.map('map');
  if (x && y && z) {
    map.setView([y, x], z);
    fetchEligData(map);
  } else {
    map.setView([46.710, 3.669], 6);
  }

  L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  map.on("zoom", () => {
    /* We only want to enable the search button when we reached a sufficient zoom level */
    if (btn.disabled && map.getZoom() >= minZoomForRequest) {
      displayBtn(btn);
    }
    if (!btn.disabled && map.getZoom() < minZoomForRequest) {
      hideBtn(btn);
    }
  });
  return map;
}

function initAddrSearch(map) {
  const autocompleteOptions = {
    debounceTime: 300,
    search: async (query) => {
      if (query.length > 2) {
        const mapCenter = map.getCenter();
        const reqUri = `https://photon.komoot.io/api/?q=${encodeURI(query)}&lat=${mapCenter.lat}&lon=${mapCenter.lng}&limit=20&lang=fr`;
        const source = await fetch(reqUri);
        const data = await source.json();
        return data.features;
      } else {
        return [];
      }
    },
    renderResult: (res, props) => {
      const p = res.properties;
      if (p.name && p.postcode && p.city && p.county && res.geometry.coordinates && res.geometry.coordinates.length === 2)
        return `<li ${props}>${p.name} - ${p.postcode} ${p.city}, ${p.county}</li>`;
      else
        return "";
    },
    onSubmit: async (res) => {
      const searchInput = document.getElementById('search-addr-autocomplete-input');
      const p = res.properties;
      searchInput.value = `${p.name} - ${p.postcode} ${p.city}, ${p.county}`;
      // We already filtered out the result not having strictly 2 coordinates at item display
      map.setView([res.geometry.coordinates[1], res.geometry.coordinates[0]], 19);
      fetchEligData(map);
    }
  };
  const autocompleteAddr = new Autocomplete("#search-addr-autocomplete", autocompleteOptions);
  return autocompleteAddr;
}

function updateEligData(map, eligData) {
  markers.map(marker => map.removeLayer(marker));
  let buildings = eligData.buildings;
  markers = Object.values(buildings).map(building => {
    const latlng = new L.latLng(building.y, building.x);
    let addrImm = `${building.numVoieImm} ${building.typeVoieImm} ${building.nomVoieImm}`
    if (building.bat_info != "") {
      addrImm += ` (Bat ${building.bat_info})`
    }
    let messageElig = ``
    eligTestApi=`testeligibilite/immeuble?idImm=${building.idImm}&codePostal=${building.codePostal}`
    if (building.aquilenetEligStatus.isEligible) {
      messageElig = `<p class=deployeeAquilenet>Fibre deployee !`
      messageElig += `<br/><a href=${eligTestApi}>Tester l'eligibilite par Aquilenet`
      if (building.fdnEligStatus.isEligible) {
        messageElig += " et FDN"
      }
      messageElig += "</a></p>"
    } else if (building.fdnEligStatus.isEligible && building.othersEligStatus.isEligible) {
      messageElig = `<p class=deployeeFDN>Fibre deployee mais pas chez Aquilenet !`
      messageElig += `<br/><a href=${eligTestApi}>Tester l'eligibilite par FDN</a></p>`
    } else if (building.othersEligStatus.isEligible) {
      messageElig = `<p class=deployeeAutres>Fibre deployee mais non eligible Aquilenet, desole :(</p>`
    } else {
      messageElig = `<p class=nonDeployee>Fibre non deployee :(</p>`
      if (building.othersEligStatus.reasonNotEligible != "") {
        messageElig += `<br/><br/>Status general ARCEP: ${building.othersEligStatus.reasonNotEligible}`
      }
    }
    if (building.aquilenetEligStatus.reasonNotEligible != "") {
      messageElig += `<br/> Pour Aquilenet, raison non eligible: ${building.aquilenetEligStatus.reasonNotEligible}`
    }
    const marker = new L.marker(latlng)
      .bindPopup(`${addrImm}<br/>${building.codePostal} ${building.commune}`
               + `<br/><br/>${messageElig}<br/><br/>Ref Immeuble: ${building.idImm}`, {
                maxWidth : 560
            });
    map.addLayer(marker);
    return marker
  });
}

function updateUrl(map) {
  const c = map.getCenter();
  history.replaceState({}, "", encodeURI(`?x=${c.lng}&y=${c.lat}&z=${map.getZoom()}`));
}

async function fetchEligData(map) {
  const zoom = map.getZoom();
  if (zoom >= minZoomForRequest) {
    const mc = map.getCenter();
    const bounds = map.getBounds();
    const sw = bounds.getSouthWest();
    const ne = bounds.getNorthEast();
    const btn = document.getElementById("btn-load-elig-data");
    waitBtn(btn);
    const reqUri = encodeURI(`eligdata?swx=${sw.lng}&swy=${sw.lat}&nex=${ne.lng}&ney=${ne.lat}&centerlat=${mc.lat}&centerlng=${mc.lng}`);
    const source = await fetch(reqUri);
    const eligData = await source.json();
    updateEligData(map, eligData);
    updateUrl(map);
    displayBtn(btn);
  }
}

function initBtn() {
  const btn = document.getElementById("btn-load-elig-data");
  btn.disabled = true;
  btn.title = "Veuillez zoomer plus la carte avant de lancer une recherche d'éligibilité.";
  btn.onclick = () => fetchEligData(map);
  return btn;
}

function displayBtn(btn) {
  btn.disabled = false;
  btn.title = "Rechercher les données d'éligibilité pour cette zone."
}

function hideBtn(btn) {
  btn.disabled = true;
  btn.title = "Veuillez zoomer plus la carte avant de lancer une recherche d'éligibilité.";
}
function waitBtn(btn) {
  btn.disabled = true;
  btn.title = "Chargement des batiments...";
}


const btn = initBtn();
const map = initMap(btn);
const addrSearch = initAddrSearch(map);