import React from 'react';
import { useTranslation } from 'react-i18next';
import { EventStatus, MatrixEvent, Room } from 'matrix-js-sdk';
import classNames from 'classnames';
import { MessageDeliveryStatus, useMessageStatus } from '../../../hooks/useMessageStatus';
import * as css from '../../../components/message/layout/Bubble.css';

type DmReadStatusLineProps = {
  room: Room;
  mEvent: MatrixEvent;
  // Privacy mode (settings `hideActivity`): never reveal peer read-state — cap
  // at «Sent» instead of flipping to «Read». Mirrors useDotColor's gate.
  hideReadReceipts?: boolean;
};

// Read/delivery status under the user's LAST own message in a 1:1 DM bubble
// chat: Sending… → Sent → Read (or «Not sent» on failure). Reuses
// useMessageStatus (reactive via RoomEvent.Receipt / LocalEchoUpdated), so it
// flips to «Read» the instant the peer's read receipt lands.
export function DmReadStatusLine({ room, mEvent, hideReadReceipts }: DmReadStatusLineProps) {
  const { t } = useTranslation();
  const status = useMessageStatus(room, mEvent);

  if (mEvent.status === EventStatus.NOT_SENT || mEvent.status === EventStatus.CANCELLED) {
    return (
      <span className={classNames(css.Status, css.StatusFailed)}>{t('Room.delivery.failed')}</span>
    );
  }

  if (status === MessageDeliveryStatus.Sending) {
    return <span className={css.Status}>{t('Room.delivery.sending')}</span>;
  }

  if (status === MessageDeliveryStatus.Read && !hideReadReceipts) {
    return <span className={css.Status}>{t('Room.delivery.read')}</span>;
  }

  if (status === MessageDeliveryStatus.Read || status === MessageDeliveryStatus.Sent) {
    return <span className={css.Status}>{t('Room.delivery.sent')}</span>;
  }

  return null;
}
