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

import SearchIcon from '@material-hu/icons/material/Search';
import InputAdornment from '@material-hu/mui/InputAdornment';
import TextField from '@material-hu/mui/TextField';

export type SearchBarProps = {
  title: string;
};

const SearchBar: FC<SearchBarProps> = props => {
  const { title } = props;
  const { control } = useFormContext();

  return (
    <Controller
      name="search"
      control={control}
      render={({ field, fieldState }) => (
        <TextField
          {...field}
          placeholder={title}
          variant="outlined"
          fullWidth
          error={!!fieldState.error}
          helperText={fieldState.error ? fieldState.error.message : null}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),
          }}
        />
      )}
    />
  );
};

export default SearchBar;