import DownloadIcon from '@material-hu/icons/material/Download';
import Box from '@material-hu/mui/Box';
import MenuItem from '@material-hu/mui/MenuItem';
import Typography from '@material-hu/mui/Typography';

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

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

export type FileNotSupportedProps = {
  fileName: string;
  fileSource: string;
  title: string;
  isFolder?: boolean;
  allowDownload?: boolean;
};

export const FileNotSupported = (props: FileNotSupportedProps) => {
  const {
    fileName,
    fileSource,
    title,
    isFolder = false,
    allowDownload = true,
  } = props;

  const { t } = useLokaliseTranslation('files');

  return (
    <Box
      sx={{
        width: '500px',
        backgroundColor: '#4c494c',
        boxShadow: '0px 10px 12px 5px rgb(0 0 0 / 20%)',
        borderRadius: '12px',
        p: '20px',
      }}
    >
      <Box
        sx={{
          width: '100%',
          textAlign: 'center',
        }}
      >
        <Typography
          sx={{
            color: '#ffffff',
            fontSize: '18px',
            fontWeight: 400,
            lineHeight: '30px',
            margin: '0px !important',
          }}
        >
          {title}
        </Typography>
      </Box>
      {!isFolder && allowDownload && (
        <Box
          sx={{
            display: 'flex !important',
            justifyContent: 'center',
            width: '100%',
            '& .MuiButton-startIcon': {
              display: 'inline-block',
              width: '20px',
              height: '20px',
              verticalAlign: 'text-top',
            },
          }}
        >
          <MenuItem
            component="a"
            href={fileSource}
            download={fileName}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Button
              variant="contained"
              sx={{
                mt: 2,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
              startIcon={
                <DownloadIcon
                  fontSize="small"
                  sx={{ mr: 1 }}
                />
              }
            >
              {t('DOWNLOAD')}
            </Button>
          </MenuItem>
        </Box>
      )}
    </Box>
  );
};

export default FileNotSupported;