import React from 'react';
import { Icon, Icons, color } from 'folds';
import { MatrixEvent, Room } from 'matrix-js-sdk';
import { useMessageStatus, MessageDeliveryStatus } from '../../hooks/useMessageStatus';

export type MessageStatusProps = {
  room: Room;
  mEvent: MatrixEvent;
  hideReadReceipts?: boolean;
};

export function MessageStatus({ room, mEvent, hideReadReceipts }: MessageStatusProps) {
  const status = useMessageStatus(room, mEvent);

  if (status === MessageDeliveryStatus.Sending) {
    return <Icon size="50" src={Icons.Clock} style={{ opacity: 0.5, flexShrink: 0 }} />;
  }

  if (status === MessageDeliveryStatus.Read && !hideReadReceipts) {
    return (
      <Icon size="50" src={Icons.CheckTwice} style={{ color: color.Success.Main, flexShrink: 0 }} />
    );
  }

  if (status === MessageDeliveryStatus.Sent || status === MessageDeliveryStatus.Read) {
    return <Icon size="50" src={Icons.Check} style={{ opacity: 0.5, flexShrink: 0 }} />;
  }

  return null;
}