import { FC } from 'react';

import List from '@material-hu/mui/List';
import Typography from '@material-hu/mui/Typography';

import NewModal from '@material-hu/components/deprecated/NewModal';

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

import { FORMAT_BY_ACCEPT } from './constants';
import { Accept } from './types';

export type AllowedAttachmentsModalProps = {
  onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  accept: Accept;
};

export const AllowedAttachmentsModal: FC<
  AllowedAttachmentsModalProps
> = props => {
  const { onClose, accept } = props;

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

  return (
    <NewModal
      onClose={onClose}
      title={t('backoffice_only:form_drop_attachments.allowed_types')}
      body={
        <List>
          {Object.keys(accept).map(format => (
            <Typography
              key={format}
              variant="body1"
              color="text.secondary"
            >
              {t(
                `backoffice_only:form_drop_attachments.${FORMAT_BY_ACCEPT[format as keyof typeof FORMAT_BY_ACCEPT]}`,
              )}
            </Typography>
          ))}
        </List>
      }
    />
  );
};

export default AllowedAttachmentsModal;