import { ListItemText } from "@mui/material";
import React from "react";
import { ChatTimeMessage } from "@/components/Chat/style";
import { formatTime } from "@/components/common/common";
import { ChatMessageProps } from "@/hooks/Interface";
import MessageReadStatus from "./messageReadStatus";

const MessageWithTimeStatus: React.FC<ChatMessageProps> = ({
  message,
  currentLoggedUserId,
  indexOfLastMessageRead,
  index,
  activeUser,
}) => {
  const isSender = +message?.sender_id === +currentLoggedUserId;

  return (
    <ChatTimeMessage>
      {isSender ? (
        <>
          <ListItemText
            style={{ textAlign: "right" }}
            secondary={formatTime(message?.created_at)}
          ></ListItemText>
          <MessageReadStatus
            messageStatus={message?.status}
            indexOfLastMessageRead={indexOfLastMessageRead}
            index={index}
          />
        </>
      ) : (
        <ListItemText
          style={{ textAlign: "left" }}
          secondary={`${
            activeUser?.is_group === 1 ? message?.user_name : ""
          } ${formatTime(message?.created_at)}`}
        ></ListItemText>
      )}
    </ChatTimeMessage>
  );
};

export default MessageWithTimeStatus;