import { FC } from 'react';

import CloseIcon from '@material-hu/icons/material/Close';
import CircularProgress from '@material-hu/mui/CircularProgress';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

type Props = {
  onClose: () => void;
};

const DownloadingReportModal: FC<Props> = props => {
  const { onClose } = props;
  const { t } = useLokaliseTranslation('time_tracker');

  return (
    <Stack sx={{ p: 3, pb: 4 }}>
      <Stack
        sx={{
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-between',
          mb: 2,
        }}
      >
        <Typography
          variant="globalM"
          sx={{
            fontWeight: 'fontWeightBold',
            color: ({ palette }) => palette.new.text.neutral.default,
          }}
        >
          {t('DOWNLOADING_REPORT')}
        </Typography>
        <IconButton onClick={onClose}>
          <CloseIcon />
        </IconButton>
      </Stack>
      <Stack
        sx={{
          alignItems: 'center',
          flexDirection: 'row',
          gap: 2,
        }}
      >
        <CircularProgress />
        <Typography
          variant="globalS"
          sx={{
            color: ({ palette }) => palette.new.text.neutral.lighter,
          }}
        >
          {t('DOWNLOADING_HINT')}
        </Typography>
      </Stack>
    </Stack>
  );
};

export default DownloadingReportModal;