import { FC } from 'react';

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

import { MessageStatus as MessageStatusType } from 'src/types/chats';
import { formatToTime } from 'src/utils/date';

import MessageStatus from './MessageStatus';

export type MessageInfoProps = TypographyProps & {
  createdAt: Date;
  status: MessageStatusType;
  senderType: 'contact' | 'user';
  isFile?: boolean;
};

export const MessageInfo: FC<MessageInfoProps> = props => {
  const {
    status,
    createdAt,
    senderType,
    isFile = false,
    ...typographyProps
  } = props;

  return (
    <Box sx={{ width: '50px' }}>
      <Typography
        color={isFile ? '#FFFFFF' : 'textSecondary'}
        variant="caption"
        noWrap
        sx={{ mt: '0 !important' }}
        {...typographyProps}
      >
        {formatToTime(createdAt)}
        <MessageStatus
          status={status}
          senderIsUser={senderType === 'user'}
          fontSize="inherit"
          sx={{ ml: 0.4 }}
        />
      </Typography>
    </Box>
  );
};

export default MessageInfo;