import { FC } from 'react';
import { Controller } from 'react-hook-form';

import Box from '@material-hu/mui/Box';
import InputAdornment from '@material-hu/mui/InputAdornment';
import TextField from '@material-hu/mui/TextField';

import SearchIcon from 'src/icons/Search';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type SearchBarProps = {
  control: any;
};

export const SearchBar: FC<SearchBarProps> = props => {
  const { control } = props;

  const { t } = useLokaliseTranslation('files');

  return (
    <Box sx={{ m: 1 }}>
      <Controller
        control={control}
        name="query"
        render={({ field }) => (
          <TextField
            fullWidth
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon fontSize="small" />
                </InputAdornment>
              ),
            }}
            placeholder={t('SEARCH_BAR_PLACEHOLDER')}
            variant="outlined"
            {...field}
          />
        )}
      />
    </Box>
  );
};

export default SearchBar;
