import Search from '@material-hu/icons/material/Search';

import HuInputClassic from '@material-hu/components/design-system/Inputs/Classic';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { useFilterParams } from '../../hooks/useFilterParams';

type InputSearchBarProps = {
  loading?: boolean;
};

const InputSearchBar = ({ loading }: InputSearchBarProps) => {
  const { t } = useLokaliseTranslation();
  const { setQueryStates, filterParams } = useFilterParams();

  return (
    <HuInputClassic
      hasCounter={false}
      value={filterParams?.search ?? ''}
      startAdornment={<Search />}
      onChange={value => setQueryStates({ search: value || null, limit: null })}
      placeholder={t('general:search_by_name')}
      aria-label={t('general:search_by_name')}
      loading={loading}
      autoFocus
    />
  );
};

export default InputSearchBar;
