// Copyright 2018 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import type { ReactElement } from 'react';
import classNames from 'classnames';

import { formatTime } from '../../util/formatTimestamp.dom.ts';

import type { LocalizerType } from '../../types/Util.std.ts';
import { Time } from '../Time.dom.tsx';
import { useNowThatUpdatesEveryMinute } from '../../hooks/useNowThatUpdatesEveryMinute.std.ts';

export type Props = {
  direction?: 'incoming' | 'outgoing';
  i18n: LocalizerType;
  isOutlineOnlyBubble?: boolean;
  isRelativeTime?: boolean;
  module?: string;
  timestamp: number;
  withImageNoCaption?: boolean;
  withSticker?: boolean;
  withTapToViewExpired?: boolean;
};

export function MessageTimestamp({
  direction,
  i18n,
  isRelativeTime,
  isOutlineOnlyBubble,
  module,
  timestamp,
  withImageNoCaption,
  withSticker,
}: Readonly<Props>): ReactElement {
  const now = useNowThatUpdatesEveryMinute();
  const moduleName = module || 'module-timestamp';

  return (
    <Time
      className={classNames(
        moduleName,
        direction ? `${moduleName}--${direction}` : null,
        withImageNoCaption ? `${moduleName}--with-image-no-caption` : null,
        withSticker ? `${moduleName}--with-sticker` : null,
        isOutlineOnlyBubble ? `${moduleName}--outline-only-bubble` : null
      )}
      timestamp={timestamp}
    >
      {formatTime(i18n, timestamp, now, isRelativeTime)}
    </Time>
  );
}
