import { FC, PropsWithChildren } from 'react';
import { useDropzone } from 'react-dropzone';

import CloudUploadIcon from '@material-hu/icons/material/CloudUpload';
import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

import useSnackbar from '@material-hu/components/design-system/Snackbar';

import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type FormFileDropZoneChatsProps = {
  onDrop: (files) => void;
  disabled?: boolean;
};

const FormFileDropZoneChats: FC<
  PropsWithChildren<FormFileDropZoneChatsProps>
> = props => {
  const { onDrop, disabled = false, children } = props;

  const { t } = useTranslation();
  const { enqueueSnackbar } = useSnackbar();

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    noClick: true,
    onDrop,
    disabled,
    onDropRejected: () => {
      enqueueSnackbar({ title: t('ERROR_DRAG_AND_DROP'), variant: 'error' });
    },
  });

  const navbarHeight =
    document.getElementById('dashboard-navbar')?.offsetHeight || 0;
  const chatToolbarHeight =
    document.getElementById('chat-toolbar')?.offsetHeight || 0;
  const chatStatusHeight =
    document.getElementById('chat-status')?.offsetHeight || 0;
  const chatFooterHeight =
    document.getElementById('chat-footer')?.offsetHeight || 0;
  const chatFooterWidth =
    document.getElementById('chat-footer')?.offsetWidth || 0;

  return (
    <Box
      {...getRootProps()}
      sx={{
        p: '0 !important',
        height: '100%',
      }}
    >
      {isDragActive && (
        <Box
          sx={{
            position: 'fixed',
            bottom: `${chatFooterHeight}px`,
            width: `${chatFooterWidth}px`,
            height: `calc(100vh - ${navbarHeight}px - ${chatToolbarHeight}px - ${chatStatusHeight}px - ${chatFooterHeight}px)`,
            zIndex: '1',
            backgroundColor: '#f4f5f7',
          }}
        >
          <Box
            sx={{
              height: '100%',
              p: 4,
              cursor: 'pointer',
              '&:hover': {
                opacity: 0.5,
              },
            }}
          >
            <Box
              sx={{
                borderRadius: 1,
                border: '4px dashed #5664d2',
                height: '100%',
                width: '100%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'column',
              }}
            >
              <CloudUploadIcon sx={{ color: '#5664d2', fontSize: '100px' }} />
              <Typography sx={{ fontSize: '24px' }}>
                {t('DROP_FILE')}
              </Typography>
            </Box>
          </Box>
        </Box>
      )}
      {children}
      <input {...getInputProps()} />
    </Box>
  );
};
export default FormFileDropZoneChats;