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

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

import Button from '@material-hu/components/design-system/Buttons/Button';

import { transactionsOptions } from 'src/constants/recognitions';
import DesktopDatePickerControl from 'src/pages/dashboard/recognitions/components/formControls/DesktopDatePickerControl';
import SelectControl from 'src/pages/dashboard/recognitions/components/formControls/SelectControl';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { isMobileScreen } from 'src/utils/recognitions';

export type TransactionsSearchProps = {
  onSubmit: () => void;
};

export const TransactionsSearch: FC<TransactionsSearchProps> = props => {
  const { onSubmit } = props;

  const { t } = useTranslation();

  const display = isMobileScreen() ? 'block' : 'flex';
  const marginTop = isMobileScreen() ? 2 : 0;

  const { handleSubmit, control } = useFormContext();

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      style={{ width: '100%' }}
    >
      <Box
        sx={{
          display: display,
          justifyContent: 'space-between',
          width: '100%',
          alignItems: 'center',
        }}
      >
        <Box sx={{ display: display }}>
          <DesktopDatePickerControl
            name="startDate"
            label={t('START_DATE')}
          />
          <Box sx={{ display: display, mt: marginTop }}>
            <DesktopDatePickerControl
              name="endDate"
              label={t('END_DATE')}
            />
          </Box>
          <Box
            sx={{
              display: display,
              mt: marginTop,
              ml: isMobileScreen() ? 1 : 0,
            }}
          >
            <SelectControl
              name="movement"
              label={t('MOVEMENT')}
              options={transactionsOptions}
              control={control}
              defaultValue="all"
              sx={{
                m: 1,
                width: 200,
                '& .MuiInputBase-root': {
                  borderRadius: '4px',
                },
                '& .MuiSelect-select': {
                  pt: '10px',
                  pb: '10px',
                },
              }}
              displayEmpty
            />
          </Box>
        </Box>
        <Button
          variant="contained"
          type="submit"
          sx={{ mt: marginTop, ml: marginTop }}
        >
          {t('SEARCH')}
        </Button>
      </Box>
    </form>
  );
};

export default TransactionsSearch;