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 { useTheme } from '@material-hu/mui/styles';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

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

import { ORDER_OPTIONS } from 'src/constants/events';
import { FilterValues } from 'src/types/nemakEvents';

import DatePickerControl from './formControls/DatePickerControl';
import SelectControl from './formControls/SelectControl';
import TextFieldNumberControl from './formControls/TextFieldNumberControl';
import ToggleButtonControl from './formControls/ToggleButtonControl';
import FormTitle from './FormTitle';
import { useTranslation } from './i18n';

export type FiltersDialogProps = {
  open: boolean;
  onClose: () => void;
  onApplyFilters: (data: FilterValues) => void;
  orderBy: string;
  order: string;
  startDateValue: Date;
  endDateValue: Date;
  minCapacity: number;
  maxCapacity: number;
};

export const FiltersDialog: FC<FiltersDialogProps> = props => {
  const {
    open,
    onClose,
    onApplyFilters,
    orderBy,
    order,
    startDateValue,
    endDateValue,
    minCapacity,
    maxCapacity,
  } = props;

  const methods = useForm<FilterValues>();
  const { handleSubmit } = methods;

  const { t } = useTranslation();
  const theme = useTheme();

  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

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

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullWidth
    >
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <DialogContent sx={{ p: 4 }}>
            <Box>
              <FormTitle title={t('ORDER_BY')} />
              <Divider sx={{ mt: 1, mb: 2 }} />
              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                <SelectControl
                  name="orderBy"
                  orderBy={orderBy}
                  options={ORDER_OPTIONS}
                />
                <ToggleButtonControl
                  name="order"
                  order={order}
                />
              </Box>
            </Box>
            <Box sx={{ mt: 3 }}>
              <FormTitle title={t('EVENT_DATE')} />
              <Divider sx={{ mt: 1, mb: 2 }} />
              <Box
                sx={{
                  display: isMobile ? 'block' : 'flex',
                  justifyContent: 'space-between',
                }}
              >
                <DatePickerControl
                  name="startDate"
                  label={t('START_DATE')}
                  defaultDate={startDateValue}
                  sx={{ mb: isMobile ? 1.4 : 0 }}
                />
                <DatePickerControl
                  name="endDate"
                  label={t('END_DATE')}
                  defaultDate={endDateValue}
                />
              </Box>
            </Box>
            <Box sx={{ mt: 3 }}>
              <FormTitle title={t('PEOPLE_CAPACITY')} />
              <Divider sx={{ mt: 1, mb: 2 }} />
              <Box
                sx={{
                  display: isMobile ? 'block' : 'flex',
                  justifyContent: 'space-between',
                }}
              >
                <TextFieldNumberControl
                  name="minCapacity"
                  label={t('MINIMUM_CAPACITY')}
                  defaultValue={minCapacity}
                  sx={{ mb: isMobile ? 1.4 : 0 }}
                />
                <TextFieldNumberControl
                  name="maxCapacity"
                  label={t('MAXIMUM_CAPACITY')}
                  defaultValue={maxCapacity}
                />
              </Box>
            </Box>
          </DialogContent>
          <DialogActions sx={{ px: 4, py: 2 }}>
            <Button
              onClick={onClose}
              variant="contained"
              color="secondary"
              sx={{ mr: 3 }}
            >
              {t('CANCEL')}
            </Button>
            <Button
              type="submit"
              variant="outlined"
            >
              {t('APPLY_FILTERS')}
            </Button>
          </DialogActions>
        </form>
      </FormProvider>
    </Dialog>
  );
};

export default FiltersDialog;
