import React, { useState } from "react";
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";

interface CommentThreadsProps {
  commentClicked: () => void;
}

const CommentThreads: React.FC<CommentThreadsProps> = ({ commentClicked }) => {
  const [expand, setExpand] = useState(false);
  const commentsedUsers = [{ creatorId: "1" }];

  const CommentDetails = {
    state: "active",
    commentId: "c-1",
    creatorId: "12",
    createdAt: "2 hours ago",
    comment: "Thread check",
    lastUpdatedAt: "string",
    replies: [
      {
        replyId: "string",
        creatorId: "string",
        createdAt: "string",
        lastUpdatedAt: "string",
        reply: "string",
      },
      {
        replyId: "string",
        creatorId: "string",
        createdAt: "string",
        lastUpdatedAt: "string",
        reply: "string",
      },
    ],
  };

  function getUsername(userId: string) {
    const UserName = "username";
    return UserName;
  }

  function getDetails(type?: "clicked") {
    if (type === "clicked") {
      setExpand(true);
      commentClicked();
    } else {
      setExpand((prev) => !prev);
    }
  }

  return (
    <div className="comments-threads-wrapper">
      <button
        onPointerEnter={() => getDetails()}
        onPointerLeave={() => getDetails()}
        onClick={() => getDetails("clicked")}
        className={`comments-threads-container ${
          expand ? "open" : "closed"
        } unread`}
      >
        <div className="users-commented">
          {commentsedUsers.map((val, i) => (
            <div
              className="users"
              key={val.creatorId}
              style={{
                background: getAvatarColor(i, getUsername(val.creatorId)),
              }}
            >
              {getUsername(val.creatorId)[0]}
            </div>
          ))}
        </div>
        <div className={`last-comment-details ${expand ? "expand" : ""}`}>
          <div className="header">
            <div className="user-name">
              {getUsername(CommentDetails.creatorId)}
            </div>
            <div className="time">{CommentDetails.createdAt}</div>
          </div>
          <div className="message">{CommentDetails.comment}</div>
          {CommentDetails.replies.length > 0 && (
            <div className="replies">
              {CommentDetails.replies.length}{" "}
              {CommentDetails.replies.length === 1 ? "reply" : "replies"}
            </div>
          )}
        </div>
      </button>
    </div>
  );
};

export default CommentThreads;
