import React, {memo} from 'react';
import {ViewStyle} from 'react-native';
import {DeliverStatus, MessageStatus} from '@modules/chats/interfaces';
import {MESSAGE_STATUS_ICONS, MessageStatusUI} from '@modules/chats/constants';
import {useTheme} from '@shared/theme';

interface Props {
  status?: Nullable<MessageStatus>;
  deliverStatus?: DeliverStatus;
  style?: ViewStyle;
  extraRightSpace?: boolean;
  withRightSpace?: boolean;
}

function MessageStatusDisplayerComponent({
  status,
  deliverStatus,
  style,
  withRightSpace,
}: Props) {
  const {iconSizes, theme} = useTheme();

  const statusUI = deliverStatus?.read_at
    ? MessageStatusUI.Read
    : deliverStatus?.received_at
    ? MessageStatusUI.Delivered
    : status;
  const MessageStatusIcon =
    statusUI && statusUI in MESSAGE_STATUS_ICONS
      ? MESSAGE_STATUS_ICONS[statusUI]
      : null;

  if (!MessageStatusIcon) {
    return null;
  }

  const isRead = statusUI === MessageStatusUI.Read;

  return (
    <>
      <MessageStatusIcon
        style={style}
        color={isRead ? theme.brand[400] : theme.text.neutral.default}
        size={iconSizes.x4}
        testID={`message-status-icon-${statusUI}`}
      />
      {withRightSpace && ' '}
    </>
  );
}

export const MessageStatusDisplayer = memo(MessageStatusDisplayerComponent);