import React, { useEffect, useState } from "react";
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
import { getUserData } from "../../../functions/getUserData";
import { getAllThreads } from "../../../services/factoryBuilder/comments/getAllThreads";
import { useParams } from "react-router-dom";
import { useCommentStore } from "../../../store/collaboration/useCommentStore";
import { getRelativeTime } from "./function/getRelativeTime";
import { useSelectedComment } from "../../../store/builder/store";

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

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

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

  function getUsername(userId: string) {
    const UserName = userName?.charAt(0).toUpperCase() || "user";
    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>
          ))}
          {/* {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">
              {userName}
              {/* {getUsername(CommentDetails.creatorId)} */}
            </div>
            <div className="time">{comment?.createdAt && getRelativeTime(comment.createdAt)}</div>
          </div>
          <div className="message">{comment?.threadTitle}</div>
          {comment && comment?.comments.length > 0 && (
            <div className="comments">
              {comment && comment?.comments.length}{" "}
              {comment && comment?.comments.length === 1 ? "comment" : "replies"}
            </div>
          )}
        </div>
      </button>
    </div>

  );
};

export default CommentThreads;
