import type { FC } from 'react';

import { useTranslation } from 'react-i18next';

import Typography, { TypographyProps } from '@material-hu/mui/Typography';

import { Attachment } from 'src/types/attachments';
import { getAttachmentsTotalSize } from 'src/utils/attachments';
import { getUsage } from 'src/utils/bytes';

type AttachmentsSizeProps = TypographyProps & {
  images?: Attachment[];
  files?: Attachment[];
  videos?: Attachment[];
  audios?: Attachment[];
  maxBytes: number;
  addPost?: boolean;
};

const AttachmentsSize: FC<AttachmentsSizeProps> = props => {
  const {
    images = [],
    files = [],
    videos = [],
    audios = [],
    maxBytes,
    addPost = false,
    ...typographyProps
  } = props;

  const { t } = useTranslation('attachments');

  const attachments: Attachment[] = [
    ...(files?.length > 0 ? files : []),
    ...(videos?.length > 0 ? videos : []),
    ...(images?.length > 0 ? images : []),
    ...(audios?.length > 0 ? audios : []),
  ];

  const bytes = getAttachmentsTotalSize(attachments);
  const usage = getUsage(bytes, maxBytes, 1);
  const isValid = bytes <= maxBytes;

  return (
    <Typography
      variant="globalXS"
      gutterBottom
      color={isValid ? 'text.secondary' : 'error.main'}
      {...typographyProps}
    >
      {addPost ? <>{usage}</> : <>{t('usage', { usage })}</>}
    </Typography>
  );
};

export default AttachmentsSize;