import Icon from "@ant-design/icons";
import { Tooltip } from "antd";
import i18n from "i18next";
import dayjs from "../../utils/day";
import { MdDone, MdDoneAll } from "react-icons/md";
import { DateTimeFormatter } from "../../utils/DateFormatter";

export const renderMessage = (messages, index) => {
  const message = messages[index];

  return (
    <div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
      <div className="message msgmargin">
        <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
          <div>
            {/* Render images if available */}
            {message.image && message.image_path?.length > 0 && (
              <div className="message-images">
                {message.image_path.map((url, idx) => (
                  <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
                    <a href={url} target="_blank" rel="noopener noreferrer">
                      <img alt="Received" className="message-img" src={url} />
                    </a>
                  </div>
                ))}
              </div>
            )}
            {/* Render text if available */}
            {message.text && <div>{message.text}</div>}
          </div>
        </Tooltip>

        {/* Message status icons */}
        {message.status && (message.status === "sent" || message.status === "delivered") && (
          <div className="message-status">
            <Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
          </div>
        )}
      </div>

      {/* Outbound message metadata */}
      {message.isoutbound && (
        <div style={{ fontSize: 10 }}>
          {i18n.t("messaging.labels.sentby", {
            by: message.userid,
            time: dayjs(message.created_at).format("MM/DD/YYYY @ hh:mm a")
          })}
        </div>
      )}
    </div>
  );
};