class LocalitySearch {
  constructor(localitySelected, containerId) {
    this.template = `
      <div class="localitySearchControl">
        <input type="text" id="localitySearchInput" class="orderFormInput" placeholder="Lyon ou 69003">
      </div>
      <div id="localitySearchResults" class="hidden"></div>
    `
    this.localitySelected = localitySelected;
    this.containerId = containerId
  }


  init() {
    const container = document.getElementById(this.containerId);
    if (container) {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = this.template;
      while (tempDiv.firstChild) {
        container.appendChild(tempDiv.firstChild);
      }
    }

    const localitySearch = document.getElementById('localitySearchInput');
    localitySearch.addEventListener('input', () => {
      this.performSearch();
    });

  }


  performSearch() {
    const searchInput = document.getElementById('localitySearchInput');
    const searchResults = document.getElementById('localitySearchResults');

    if (!searchInput || !searchResults) return;

    const query = searchInput.value;
    if (!query) return;

    searchResults.innerHTML = '<p>Recherche en cours...</p>';
    searchResults.classList.remove('hidden');

    searchLocation(query)
      .then(data => {
        if (data && data.length > 0) {
          this.displaySearchResults(data, searchResults);
        } else {
          searchResults.innerHTML = '<p>Aucun résultat trouvé.</p>';
        }
      })
      .catch(error => {
        console.error('Erreur lors de la recherche:', error);
        searchResults.innerHTML = '<p>Erreur lors de la recherche. Veuillez réessayer.</p>';
      });
  }

  displaySearchResults(results, resultsContainer) {
    resultsContainer.innerHTML = '';

    const resultList = document.createElement('ul');
    resultList.className = 'localitySearchResultsList';

    results.forEach(result => {
      const resultItem = document.createElement('li');
      resultItem.className = 'localitySearchResultItem';
      resultItem.textContent = result.properties.city + (result.properties.postcode ? ` (${result.properties.postcode})` : '');

      resultItem.addEventListener('click', () => {
        this.selectSearchResult(result);
        resultsContainer.classList.add('hidden');
      });

      resultList.appendChild(resultItem);
    });

    resultsContainer.appendChild(resultList);
  }


  selectSearchResult(result) {
    try {
      const { geometry, osm_type, osm_id } = result;

      if (Array.isArray(geometry.coordinates)) {
        const geoJSON = {
          type: 'Feature',
          geometry,
          properties: {
            name: result.display_name,
            source: 'search'
          }
        };

        this.localitySelected(geoJSON);

      }
    } catch (error) {
      console.error("Erreur lors de la sélection du résultat", error);
    }
  }


}