import ThreeDotIcon from "../../../../../assets/treedotIcon.svg";
import TreadChatIcon from "../../../../../assets/treadChatIcon.svg";
import PinnedIcon from "../../../../../assets/pinedIcon.svg";
import UnpinIcon from "../../../../../assets/unpinedIcon.svg";
import React, { useState } from "react";

const ChatEditedMessageType = ({
  content,
  timestamp,
  handleClickOnMoreOptions,
  priority = "default",
  edited = false,
  onThreadClick,
  pinned,
  onPin,
}) => {
  const [showPinned, setShowPinned] = useState(pinned);
  const handlePin = async (isPinned) => {
    try {
      const response = await onPin(isPinned);
      console.log("Response: [DefaultMessageType]", response);
      if (response) {
        setShowPinned(isPinned);
      }
      return response;
    } catch (error) {
      console.error("Error pinning message:", error);
    }
  };
  return (
    <div className={`message-text ${priority}`}>
      {typeof content === "string" ? <p>{content}</p> : content}
      <div className={`message-header ${!isUser ? "flex-end" : ""}`}>
        <div className="message-action-container">
          <img
            src={ThreeDotIcon}
            alt="threedot"
            onClick={handleClickOnMoreOptions}
          />
          <img src={TreadChatIcon} alt="treaddd" onClick={onThreadClick} />
        </div>
        <div className="message-action-info-container">
          <img
            src={pinned ? PinnedIcon : UnpinIcon}
            alt="unpinned"
            width={12.63}
            height={12.63}
            style={{ cursor: "pointer" }}
            onClick={() => handlePin(!showPinned)}
          />
          <span className="message-action-info">
            {timestamp}
            {edited && <span className="edited-label"> (edited)</span>}
          </span>
        </div>
      </div>
    </div>
  );
};

export default ChatEditedMessageType;
