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>
            {message.image_path &&
              message.image_path.map((i, idx) => (
                <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
                  <a href={i} target="__blank" rel="noopener noreferrer">
                    <img alt="Received" className="message-img" src={i} />
                  </a>
                </div>
              ))}
            <div>{message.text}</div>
          </div>
        </Tooltip>
        {message.status && (message.status === "sent" || message.status === "delivered") && (
          <div className="message-status">
            <Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
          </div>
        )}
      </div>
      {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>
  );
};