/**
 * @Move (SQXS)
 * Legacy version - Hugo version exists at BulkUpload/hugo/ - retire legacy version
 */
import { Helmet } from 'react-helmet-async';
import { useNavigate } from 'react-router';

import { IconArrowLeft } from '@material-hu/icons/tabler';
import Alert from '@material-hu/mui/Alert';
import AlertTitle from '@material-hu/mui/AlertTitle';
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 { type AnyBulkUploadType } from 'src/types/bulk';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import BulkUploadHistory from './components/BulkUploadHistory';
import NewBulkUpload from './components/NewBulkUpload';
import { USERS_TITLE_KEYS } from './constants';

type Props = {
  type: AnyBulkUploadType;
  showAlert?: boolean;
};

const BulkUpload = ({ type, showAlert = false }: Props) => {
  const { t } = useLokaliseTranslation(['backoffice_only', 'users']);

  const navigate = useNavigate();

  const usersTitleKey = USERS_TITLE_KEYS[type];
  const title = usersTitleKey
    ? t(usersTitleKey)
    : t('backoffice_only:bulk_upload.bulk_upload', { context: type });
  const alert = {
    title: t('backoffice_only:bulk_upload.alert_title', { context: type }),
    description: t('backoffice_only:bulk_upload.alert_description', {
      context: type,
    }),
  };

  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.back')}
            </Button>
            <Typography variant="h5">{title}</Typography>
            <NewBulkUpload type={type} />
            {showAlert && (
              <Alert severity="info">
                {alert.title && <AlertTitle>{alert.title}</AlertTitle>}
                {alert.description}
              </Alert>
            )}
            <BulkUploadHistory type={type} />
          </Stack>
        </Container>
      </Box>
    </>
  );
};

export default BulkUpload;