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

const CommentThreads: React.FC = () => {
  const [expand, setExpand] = useState(true);
  const commentsedUsers = [
    {
      userId: "1",
      userName: "user",
    },
    {
      userId: "1",
      userName: "Admin",
    },
  ];

  function getDetails(type?: "clicked") {
    if (type === "clicked") {
      setExpand(true);
    } 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"}`}
      >
        <div className="users-commented">
          {commentsedUsers.map((val, i) => (
            <div
              className="users"
              key={val.userId}
              style={{ background: getAvatarColor(i, val.userName) }}
            >
              {val.userName[0]}
            </div>
          ))}
        </div>
        <div
          className={`last-comment-details ${expand ? "expand" : ""}`}
        >
          <div className="header">
            <div className="user-name">user</div>
            <div className="time">4 mins, ago</div>
          </div>
          <div className="message">hello</div>
          <div className="replies">0 replies</div>
        </div>
      </button>
    </div>
  );
};

export default CommentThreads;