import { Point } from '@utils/point';

window.Webflow ||= [];
window.Webflow.push(async () => {
  let selectedPlaceName = '';
  const formCustomAttribute = '[wm-element="search-form"]';
  const inputCustomAttribute = '[wm-element="search-input"]';
  const resultsLocationInfoCustomAttribute = '[wm-element="results-location-info"]';
  await google.maps.importLibrary("maps");
  const form = document.querySelector<HTMLFormElement>(formCustomAttribute);
  const input = document.querySelector<HTMLInputElement>(inputCustomAttribute);
  const resultsLocationInfo = document.querySelector<HTMLParagraphElement>(resultsLocationInfoCustomAttribute);

  if (!form) {
    console.warn(`Couldn\'t find places search form. 
    Please set webflow custom attribute: ${formCustomAttribute} for the form.`)
    return;
  }

  if (!input) {
    console.warn(`Couldn\'t find places search input. 
    Please set webflow custom attribute: ${inputCustomAttribute} for the textinput.`)
    return;
  }

  if (!resultsLocationInfo) {
    console.warn(`Couldn\'t find results location info paragraph. 
    Please set webflow custom attribute: ${resultsLocationInfoCustomAttribute} for the results location info paragraph.`)
    return;
  }
  /*

  form.addEventListener("submit", (e) => {
    e.preventDefault();
  }, true);
  */

  google.maps.event.addListener(input, 'keydown', (e: any) => {
    if (e.keyCode === 13) {
      e.preventDefault();
    }
  });

  // Set initial restriction to the greater list of countries.
  const autocomplete = new window.google.maps.places.Autocomplete(input);
  autocomplete.setComponentRestrictions({ country: ["de", "at", "ch"] });
  autocomplete.setFields(["place_id", "address_components", "geometry", "name"]);

  google.maps.event.addListener(autocomplete, 'place_changed', () => {
    const value = autocomplete.getPlace();
    selectedPlaceName = value.name;
  });

  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances: any) => {
      form.addEventListener('submit', (e) => {
        e.preventDefault();
        e.stopPropagation();

        if (selectedPlaceName === '') {
          alert('Bitte suche zuerst einen Ort und klicke auf eine der Optionen im Dropdown.');
          return;
        }

        try {
          const value = autocomplete.getPlace();
          const searchLat = value.geometry.location.lat();
          const searchLon = value.geometry.location.lng();


          const [listInstance] = listInstances;
          const items = listInstance.items;
          const modifiedItems = items
            .map(
              (i: [number, any]) => modifyDistance(searchLat, searchLon, i)
            )
            .sort(
              (a: [number, any], b: [number, any]) => a[0] - b[0]
            )
            .map(
              (i: [number, any]) => i[1]
            );
          listInstance.clearItems();
          resultsLocationInfo.textContent = `GEFUNDENE SPEZIALISTEN IM UMKREIS VON ${selectedPlaceName.toUpperCase()}`;
          listInstance.addItems(modifiedItems);
          const searchResultSection = document.getElementById('search-results');
          if (searchResultSection) {
            searchResultSection.scrollIntoView({ behavior: 'smooth' });
          }
        } catch (e) {
          console.warn(e)
        }

      })
    },
  ]);
});

const modifyDistance = (searchLat: number, searchLon: number, item: any) => {
  const newItem = item.element.cloneNode(true) as HTMLDivElement;
  const [lat] = item.props.lat.values;
  const [lon] = item.props.lon.values;
  const searchLocation = new Point(searchLat, searchLon);
  const docLocation = new Point(parseFloat(lat), parseFloat(lon));
  const distance = searchLocation.distanceTo(docLocation);
  const distanceTextfield = newItem.querySelector('[wm-element="distance"]');
  if (distanceTextfield) distanceTextfield.textContent = `${Math.round(distance * 100) / 100} km`;
  return [distance, newItem];
}