import { FC } from 'react';

import ImageIcon from '@material-hu/icons/material/CameraAlt';
import GifBoxIcon from '@material-hu/icons/material/GifBox';
import FileIcon from '@material-hu/icons/material/InsertDriveFile';
import AudioIcon from '@material-hu/icons/material/Mic';
import VideoIcon from '@material-hu/icons/material/Videocam';
import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

import { FileTypes } from 'src/types/attachments';
import { Message, MessageType, MessageStatus } from 'src/types/chats';
import { hasAttachment, getInfoText, getInfoParamsText } from 'src/utils/chats';

import { useTranslation } from 'src/components/dashboard/chat/i18n';

export type ReduceMessageProps = {
  message: Message;
  isTyping?: boolean;
  isGroupMessage?: boolean;
};

export const ReduceMessage: FC<ReduceMessageProps> = props => {
  const { message, isTyping = false, isGroupMessage = false } = props;

  const { t } = useTranslation();

  if (isTyping) {
    return <>{t('TYPING')}</>;
  }

  if (hasAttachment(message)) {
    const attachment = message.attachments[0];

    if (attachment.type === FileTypes.VIDEO) {
      return (
        <>
          <VideoIcon
            fontSize="small"
            sx={{ mr: 1 }}
          />
          {t('SENT_VIDEO')}
        </>
      );
    }

    if (attachment.type === FileTypes.GIF) {
      return (
        <>
          <GifBoxIcon
            fontSize="small"
            sx={{ mr: 1 }}
          />
          {t('SENT_GIF')}
        </>
      );
    }

    if (attachment.type === FileTypes.IMAGE) {
      return (
        <>
          <ImageIcon
            fontSize="small"
            sx={{ mr: 1 }}
          />
          <Box component="span">{t('SENT_IMAGE')}</Box>
        </>
      );
    }
    if (attachment.type === FileTypes.FILE) {
      return (
        <>
          <FileIcon
            fontSize="small"
            sx={{ mr: 1 }}
          />
          <Box component="span">{t('SENT_FILE')}</Box>
        </>
      );
    }
    if (attachment.type === FileTypes.AUDIO) {
      return (
        <>
          <AudioIcon
            fontSize="small"
            sx={{ mr: 1 }}
          />
          <Box component="span">{t('SENT_AUDIO')}</Box>
        </>
      );
    }
  }

  if (message?.type === MessageType.INFO) {
    return (
      <Typography
        variant="body2"
        style={{
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          marginBottom: 0,
        }}
      >
        {getInfoText(message.text)}
      </Typography>
    );
  }
  if (message?.type === MessageType.INFO_PARAMS) {
    return (
      <Typography
        variant="body2"
        style={{
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          marginBottom: 0,
        }}
      >
        {getInfoParamsText(message.text)}
      </Typography>
    );
  }

  if (!message?.text && message?.status === MessageStatus.DELETED) {
    return <>{t('MESSAGE_DELETED')}</>;
  }

  return (
    <Typography
      variant="body2"
      style={{
        textAlign: 'left',
        marginBottom: 0,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        maxWidth: isGroupMessage ? '180px' : '',
      }}
    >
      {message?.text || '...'}
    </Typography>
  );
};

export default ReduceMessage;