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

import Box from '@material-hu/mui/Box';
import Dialog from '@material-hu/mui/Dialog';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import Divider from '@material-hu/mui/Divider';
import Typography from '@material-hu/mui/Typography';

import FilterButtons from 'src/pages/dashboard/recognitions/components/FilterButtons';
import TextFieldControl from 'src/pages/dashboard/recognitions/components/formControls/TextFieldControl';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { isMobileScreen } from 'src/utils/recognitions';

export type FilterProductsProps = {
  open: boolean;
  onClose: () => void;
  onApplyFilters: any;
  minSones: string;
  maxSones: string;
  minQuantity: string;
  maxQuantity: string;
};

export const FilterProducts: FC<FilterProductsProps> = props => {
  const {
    open,
    onClose,
    onApplyFilters,
    minSones,
    maxSones,
    minQuantity,
    maxQuantity,
  } = props;

  const methods = useForm();
  const { handleSubmit, control } = methods;

  const { t } = useTranslation();

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

  const onSubmit = data => {
    onApplyFilters(data);
    onClose();
  };

  const textFieldStyle = {
    width: '220px',
    height: '40px',
    mb: isMobileScreen() ? 1.4 : 0,
    '& fieldset': {
      borderRadius: '4px',
    },
    '& input': {
      py: 1.2,
    },
    '& label': {
      top: '-5px',
    },
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullWidth
    >
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <DialogContent sx={{ p: 4 }}>
            <Box>
              <Box>
                <Typography
                  color="textPrimary"
                  variant="h6"
                >
                  {t('SONES')}
                </Typography>
              </Box>
              <Divider sx={{ mt: 1, mb: 2 }} />
              <Box sx={{ display: display, justifyContent: 'space-between' }}>
                <TextFieldControl
                  name="minSones"
                  label={t('MIN_SONES')}
                  control={control}
                  sx={textFieldStyle}
                  defaultValue={minSones}
                />
                <TextFieldControl
                  name="maxSones"
                  label={t('MAX_SONES')}
                  control={control}
                  sx={textFieldStyle}
                  defaultValue={maxSones}
                />
              </Box>
            </Box>
            <Box sx={{ mt: 3 }}>
              <Box>
                <Typography
                  color="textPrimary"
                  variant="h6"
                >
                  {t('STOCK')}
                </Typography>
              </Box>
              <Divider sx={{ mt: 1, mb: 2 }} />
              <Box sx={{ display: display, justifyContent: 'space-between' }}>
                <TextFieldControl
                  name="minQuantity"
                  label={t('MIN_STOCK')}
                  control={control}
                  sx={textFieldStyle}
                  defaultValue={minQuantity}
                />
                <TextFieldControl
                  name="maxQuantity"
                  label={t('MAX_STOCK')}
                  control={control}
                  sx={textFieldStyle}
                  defaultValue={maxQuantity}
                />
              </Box>
            </Box>
          </DialogContent>
          <DialogActions sx={{ px: 4, py: 2 }}>
            <FilterButtons onClose={onClose} />
          </DialogActions>
        </form>
      </FormProvider>
    </Dialog>
  );
};

export default FilterProducts;
