/**
 * @Move (SQKG)
 * Only used by the Documents module - move to BulkUpload/
 */
import { Helmet } from 'react-helmet-async';
import { useNavigate } from 'react-router';

import { IconArrowLeft } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { NonUserBulkUploadTypes } from 'src/types/bulk';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import BulkUploadHistory from 'src/components/BulkUpload/components/BulkUploadHistory';

import NewBulkFiles from './components/NewBulkFiles';

const BulkUploadFiles = () => {
  const { t } = useLokaliseTranslation('backoffice_only');

  const title = t('backoffice_only:bulk_upload_files.bulk_upload');

  const navigate = useNavigate();

  const goBack = () => navigate(-1);

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <Box
        sx={{
          backgroundColor: 'background.default',
          minHeight: '100%',
          py: 3,
        }}
      >
        <Container maxWidth="xl">
          <Stack
            justifyContent="space-between"
            spacing={3}
          >
            <Button
              startIcon={<IconArrowLeft fontSize="small" />}
              onClick={goBack}
              variant="outlined"
              sx={{ width: '100px' }}
            >
              {t('backoffice_only:bulk_upload_files.back')}
            </Button>
            <Typography variant="h5">{title}</Typography>
            <NewBulkFiles />
            <BulkUploadHistory
              type={NonUserBulkUploadTypes.BULK_UPLOAD_DOCUMENTS}
            />
          </Stack>
        </Container>
      </Box>
    </>
  );
};

export default BulkUploadFiles;