import React from "react";
import { CommentNode } from "@/server/db/schema";
import Avatar from "../avatar";
import { formatCommentDate } from "@/lib/utils/format";
import { Button } from "../ui/button";
import CommentEditor from "../editor/comment-editor";
import CommentVoteButton from "./comment-vote-button";
import { Session } from "next-auth";
import { Badge } from "../ui/badge";
import CommentDeleteButton from "./comment-delete-button";
import { cn } from "@/lib/utils";

const Comment = React.memo(
  (props: {
    comment: CommentNode;
    setReplyComment: (comment: CommentNode) => void;
    setRef: (el: HTMLDivElement | null) => void;
    session: Session | null;
    level?: number;
  }) => {
    const { comment, setReplyComment, setRef, session, level = 0 } = props;
    const isAuthor = session?.user?.id === comment.author?.id;

    return (
      // <div className="">

      //   </div>
      //   <div className="comment-replies" style={{ marginLeft: "20px" }}>
      //     {comment.children.map((child) => (
      //       <Comment
      //         key={child.id}
      //         comment={child}
      //         setReplyComment={setReplyComment}
      //         setRef={(el) => setRef(el)} // Ensure this is stable
      //         session={session}
      //         level={level + 1}
      //       />
      //     ))}
      //   </div>
      // </div>

      <div
        className={cn(
          level > 0 && "ml-4 border-l",
          comment.children.length && "border-l",
        )}
      >
        <div
          className="flex items-start gap-2 pl-2 hover:bg-muted"
          ref={setRef}
        >
          <Avatar
            src={comment.author?.image}
            fb={comment.author?.name}
            className="size-8"
          />
          <div className="w-full">
            <div className="flex w-full items-center gap-2">
              <h5 className="text-lg font-medium capitalize">
                {comment.author?.name} {level}
              </h5>
              {isAuthor && (
                <Badge variant={"outline"} className="text-xs">
                  DU
                </Badge>
              )}
              <span className="ml-auto text-xs text-muted-foreground">
                {formatCommentDate(comment.createdAt)}
              </span>
            </div>
            <CommentEditor readOnly initialContent={comment.content!} />
            <div className="flex w-full items-center gap-2 pb-6">
              <CommentVoteButton vote commentId={comment.id} />
              <CommentVoteButton vote={false} commentId={comment.id} />
              <Button
                size={"sm"}
                variant={"ghost"}
                onClick={() => setReplyComment(comment)}
              >
                Antworten
              </Button>
              <div className="ml-auto">
                {isAuthor && <CommentDeleteButton commentId={comment.id} />}
              </div>
            </div>
          </div>
        </div>
        {comment.children && comment.children.length > 0 && (
          <div className="pl-4">
            {comment.children.map((child) => (
              <Comment
                key={child.id}
                {...props}
                comment={child}
                level={level + 1}
              />
            ))}
          </div>
        )}
      </div>
      // <div className={`flex ${level > 0 ? "ml-4" : ""} w-full`}>
      //   <div
      //     className={`${comment.children?.length || level > 0 ? "border-l" : ""} w-full pl-2`}
      //   >

      //     {comment.children && comment.children.length > 0 && (
      //       <div className="pl-4">
      //         {comment.children.map((child) => (
      //           <Comment
      //             key={child.id}
      //             {...props}
      //             comment={child}
      //             level={level + 1}
      //           />
      //         ))}
      //       </div>
      //     )}
      //   </div>
      // </div>
    );
  },
);
export default Comment;
