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={cn(
          level > 0 && "ml-4 border-l",
          comment?.children?.length && "border-l",
          comment?.missingParent && "border-l",
        )}
      >
        {comment.missingParent && (
          <div className="p-4 pt-0 text-sm italic text-muted-foreground">
            Antwort auf: Kommentar wurde gelöscht
          </div>
        )}
        <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}
              </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, idx) => (
              <Comment
                key={child?.id ?? idx}
                {...props}
                comment={child as CommentNode}
                level={level + 1}
              />
            ))}
          </div>
        )}
      </div>
    );
  },
);

export default Comment;