import { forwardRef, ForwardedRef } from 'react';

import LinearProgress from '@material-hu/mui/LinearProgress';
import MuiSnackbarContent from '@material-hu/mui/SnackbarContent';
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 { SnackbarKey } from '@material-hu/components/design-system/Snackbar';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type CancellableSnackbarContentProps = {
  onCancel: () => void;
  key: SnackbarKey;
};

const CancellableSnackbarContent = forwardRef<
  HTMLDivElement,
  CancellableSnackbarContentProps
>(({ onCancel, key }, ref: ForwardedRef<HTMLDivElement>) => {
  const { t } = useTranslation('post');
  return (
    <Stack
      ref={ref}
      style={{
        borderRadius: '4px',
        overflow: 'hidden',
        position: 'relative',
        backgroundColor: '#323232',
      }}
    >
      <MuiSnackbarContent
        key={key}
        style={{ display: 'flex', borderRadius: 0, backgroundColor: '#323232' }}
        message={
          <Stack>
            <Typography
              variant="body2"
              fontWeight="fontWeightBold"
            >
              {t('creating_large_post_title')}
            </Typography>
            <Typography variant="body2">
              {t('creating_large_post_description')}
            </Typography>
          </Stack>
        }
        action={[
          <Button
            key="cancel"
            size="small"
            onClick={onCancel}
            sx={{ color: '#1976D2' }}
          >
            {t('cancel').toLocaleUpperCase()}
          </Button>,
        ]}
      />
      <LinearProgress />
    </Stack>
  );
});

CancellableSnackbarContent.displayName = 'CancellableSnackbarContent';

export default CancellableSnackbarContent;