import React, { useCallback, useState } from 'react';
import { Autosuggest } from '../Autosuggest';
import { useStoresContext } from '../../stores.context';
import { useStrings } from '@sentecacommerce-theme/lib';
export var CitySelector = () => {
  var {
    selectedCity,
    cities,
    reset,
    filterByCity,
    allStores
  } = useStoresContext();
  var [citiesToShow, setCitiesToShow] = useState(cities);
  var filterCities = useCallback(query => {
    setCitiesToShow(!query ? cities : cities.filter(city => city.includes(query)));
  }, [cities]);

  var getStoreCountForCity = city => {
    return allStores.filter(store => store.city === city).length;
  };

  var labels = useStrings('stores');
  return /*#__PURE__*/React.createElement(Autosuggest, {
    label: labels.citySelectLabel,
    options: citiesToShow,
    selectedOption: selectedCity || undefined,
    getValue: city => city,
    getLabel: city => city + (" (" + getStoreCountForCity(city) + ")"),
    onOptionSelect: filterByCity,
    onRemove: reset,
    minLength: 0,
    debounceDelay: 0,
    updateOptions: filterCities,
    isFetching: false
  });
};
//# sourceMappingURL=index.js.map