import { useMemo } from 'react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { useTime } from '../../../hooks';
import classes from './MessageTimeDivider.module.scss';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

// Time gap threshold for showing divider (5 minutes in milliseconds)
const TIME_GAP_THRESHOLD = 5 * 60 * 1000;

interface MessageTimeDividerProps {
  /** time of previous message message.time */
  prevMessage: MessageInfo | undefined;
  /** time of current message message.time */
  currentMessage: MessageInfo | undefined;
}

const MessageTimeDivider = (props: MessageTimeDividerProps) => {
  const { prevMessage, currentMessage } = props;

  const prevMessageTime = prevMessage?.timestamp?.getTime() ?? 0;
  const currentMessageTime = currentMessage?.timestamp?.getTime() ?? 0;

  const { getTimeStampAuto } = useTime();

  const isShowTimeDivider = useMemo(() => {
    if (!currentMessageTime) {
      return false;
    }
    return currentMessageTime - prevMessageTime > TIME_GAP_THRESHOLD;
  }, [prevMessageTime, currentMessageTime]);

  if (!isShowTimeDivider) {
    return null;
  }

  return (
    <View className={cs(classes['message-time-divider'])}>
      {getTimeStampAuto(currentMessage?.timestamp?.getTime() ?? 0)}
    </View>
  );
};

export {
  MessageTimeDivider,
};