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

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 { statusOptions } from 'src/constants/recognitions';
import FilterButtons from 'src/pages/dashboard/recognitions/components/FilterButtons';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { getPlants, getAreas } from 'src/services/recognitions';
import {
  transformPlantsData,
  transformAreasData,
} from 'src/utils/recognitions';
import { isMobileScreen } from 'src/utils/recognitions';

import { recognitionsKeys } from '../queries';

import DesktopDatePickerControl from './formControls/DesktopDatePickerControl';
import SelectControl from './formControls/SelectControl';

export type FilterIdeasProps = {
  open: boolean;
  onClose: () => void;
  onApplyFilters: any;
};

export const FilterIdeas: FC<FilterIdeasProps> = props => {
  const { open, onClose, onApplyFilters } = props;

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

  const selectedPlantId = watch('ideaPlant');

  const { t } = useTranslation();

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

  const { data: plantsData, isLoading: isLoadingPlants } = useQuery(
    [recognitionsKeys.plants()],
    () => getPlants(),
  );

  const { data: areasData, isLoading: isLoadingAreas } = useQuery(
    recognitionsKeys.filterArea(selectedPlantId),
    () => getAreas(selectedPlantId),
    {
      enabled: !!selectedPlantId,
      onSuccess: () => {
        methods.setValue('ideaArea', '');
      },
    },
  );

  const plants = transformPlantsData(plantsData);
  const areas = areasData ? transformAreasData(areasData) : null;

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

  const selectStyle = {
    m: 1,
    width: isMobileScreen() ? 200 : 280,
    '& .MuiInputBase-root': {
      borderRadius: '4px',
    },
    '& .MuiSelect-select': {
      pt: '10px',
      pb: '10px',
    },
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      sx={{
        '& .MuiPaper-root': {
          maxWidth: '700px',
        },
      }}
      fullWidth
    >
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <DialogContent sx={{ p: 4 }}>
            <Box>
              <Box>
                <Typography
                  color="textPrimary"
                  variant="h6"
                >
                  {t('CREATION_DATE')}
                </Typography>
              </Box>
              <Divider sx={{ mt: 1, mb: 2 }} />
              <Box
                sx={{
                  display: display,
                  justifyContent: 'space-between',
                  mt: 3,
                }}
              >
                <DesktopDatePickerControl
                  name="startDate"
                  label={t('START_DATE')}
                  withDeleteOption
                />
                <Box sx={{ display: 'flex', mt: isMobileScreen() ? 3 : 0 }}>
                  <DesktopDatePickerControl
                    name="endDate"
                    label={t('END_DATE')}
                    withDeleteOption
                  />
                </Box>
              </Box>
            </Box>
            <Box sx={{ mt: 3 }}>
              <Box>
                <Typography
                  color="textPrimary"
                  variant="h6"
                >
                  {t('STATUS')}
                </Typography>
              </Box>
              <Divider sx={{ mt: 1, mb: 2 }} />
              <Box sx={{ display: display, justifyContent: 'space-between' }}>
                <SelectControl
                  name="status"
                  options={statusOptions}
                  control={control}
                  sx={selectStyle}
                  displayEmpty
                />
              </Box>
            </Box>
            <Box sx={{ mt: 3 }}>
              <Box>
                <Typography
                  color="textPrimary"
                  variant="h6"
                >
                  {t('IDEA_PLANT')}
                </Typography>
              </Box>
              <Divider sx={{ mt: 1, mb: 2 }} />
              {!isLoadingPlants && plants && (
                <Box sx={{ display: display, justifyContent: 'space-between' }}>
                  <SelectControl
                    name="ideaPlant"
                    options={plants}
                    control={control}
                    sx={selectStyle}
                    displayEmpty
                  />
                </Box>
              )}
            </Box>
            <Box sx={{ mt: 3 }}>
              <Box>
                <Typography
                  color="textPrimary"
                  variant="h6"
                >
                  {t('IDEA_AREA')}
                </Typography>
              </Box>
              <Divider sx={{ mt: 1, mb: 2 }} />
              <Box sx={{ display: display, justifyContent: 'space-between' }}>
                <SelectControl
                  name="ideaArea"
                  options={areas || []}
                  control={control}
                  sx={selectStyle}
                  displayEmpty
                  isLoading={isLoadingAreas}
                  disabled={!selectedPlantId || selectedPlantId === ''}
                />
              </Box>
            </Box>
          </DialogContent>
          <DialogActions sx={{ px: 4, py: 2 }}>
            <FilterButtons onClose={onClose} />
          </DialogActions>
        </form>
      </FormProvider>
    </Dialog>
  );
};

export default FilterIdeas;
