import { memo } from 'react';
import type React from 'react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { useTime } from '../../../../hooks';
import { MessageStatusIcon } from './MessageStatusIcon';
import classes from './MessageMeta.module.scss';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

interface MessageMetaProps {
  message: MessageInfo;
  enableReadReceipt?: boolean | undefined;
  className?: string | undefined;
  style?: React.CSSProperties | undefined;
}

function MessageMeta(props: MessageMetaProps) {
  const {
    message,
    className,
    style,
  } = props;

  const { timestamp, isSentBySelf, status, needReadReceipt, readReceiptInfo } = message;

  const isMessageOwner = isSentBySelf;

  const { getTimeStampAuto } = useTime();

  return (
    <View className={cs(classes['message-meta'], className)} style={style}>
      <span className={classes['message-meta__time']}>{getTimeStampAuto(timestamp?.getTime() || 0)}</span>
      {status && isMessageOwner && (
        <View className={classes['message-meta__status-icon']}>
          <MessageStatusIcon
            status={status}
            needReadReceipt={needReadReceipt}
            readReceiptInfo={readReceiptInfo}
            messageID={message.msgID}
          />
        </View>
      )}
    </View>
  );
}

export default memo(MessageMeta);