import React, { useContext } from 'react';
import _ from 'lodash';
import { InputBase } from '../components/Input';
import ServiceContext from './ServiceContext';
import useQuery from '../hooks/useQuery';

const ServiceSearch: React.FC = () => {
  const service = useContext(ServiceContext);
  const { query, setQuery } = useQuery();

  const placeholder = `Искать ${service.name.toLowerCase()}`;

  const handleChange = _.debounce((event: React.ChangeEvent<HTMLInputElement>) => {
    if (service.searchBy) {
      const newQuery = service.searchBy.reduce((acc, key) => {
        acc[`${key}[$regex]`] = event.target.value;
        return acc;
      }, query);

      setQuery(newQuery);
    }
  }, 250);

  return (
    <div className="mr-6 flex items-center">
      <InputBase placeholder={placeholder} onChange={handleChange} />
    </div>
  );
};

export default ServiceSearch;