import { FC, useEffect } from 'react';
import { useForm } from 'react-hook-form';

import FilterAltIcon from '@material-hu/icons/material/FilterAlt';
import SearchIcon from '@material-hu/icons/material/Search';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import InputAdornment from '@material-hu/mui/InputAdornment';
import TextField from '@material-hu/mui/TextField';

import { isMobileScreen } from 'src/utils/recognitions';

import { useTranslation } from './i18n';

export type EventsHeaderProps = {
  onSearchInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onOpenFilterDialog: () => void;
};

export const EventsHeader: FC<EventsHeaderProps> = props => {
  const { onSearchInputChange, onOpenFilterDialog } = props;

  const { t } = useTranslation();

  const { register, watch } = useForm();
  const searchValue = watch('search');

  useEffect(() => {
    onSearchInputChange(searchValue);
  }, [searchValue, onSearchInputChange]);

  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      <form>
        <TextField
          {...register('search')}
          placeholder={t('SEARCH_EVENT')}
          variant="outlined"
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon fontSize="small" />
              </InputAdornment>
            ),
          }}
          sx={{
            borderRadius: '4px',
            '& input': {
              p: 1.2,
              pl: 0.4,
              width: isMobileScreen() ? '120px' : '220px',
            },
            '& fieldset': {
              borderRadius: '6px',
            },
          }}
        />
      </form>
      <IconButton
        onClick={onOpenFilterDialog}
        sx={{ ml: 3 }}
      >
        <FilterAltIcon
          sx={{
            width: '26px',
            height: '26px',
            color: '#b8b7b4',
            ':hover': {
              color: theme => theme.palette.primary.main,
            },
          }}
        />
      </IconButton>
    </Box>
  );
};

export default EventsHeader;