import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useMemo } from "react";
// buzzwareTech imports
import type { E_SORT_ORDER } from "@buzzwaretech/constants";
import type { TCommentsOperations, TIssueComment } from "@buzzwaretech/types";
// local components
import { CommentCard } from "./card/root";
import { CommentCreate } from "./comment-create";

type TCommentsWrapper = {
  projectId?: string;
  entityId: string;
  isEditingAllowed?: boolean;
  activityOperations: TCommentsOperations;
  comments: TIssueComment[] | string[];
  sortOrder?: E_SORT_ORDER;
  getCommentById?: (activityId: string) => TIssueComment | undefined;
  showAccessSpecifier?: boolean;
  showCopyLinkOption?: boolean;
  enableReplies?: boolean;
};

export const CommentsWrapper = observer(function CommentsWrapper(
  props: TCommentsWrapper,
) {
  const {
    entityId,
    activityOperations,
    comments,
    getCommentById,
    isEditingAllowed = true,
    projectId,
    showAccessSpecifier = false,
    showCopyLinkOption = false,
    enableReplies = false,
  } = props;
  // router
  const { workspaceSlug: routerWorkspaceSlug } = useParams();
  const workspaceSlug = routerWorkspaceSlug?.toString();
  const renderCommentCreate = useMemo(
    () =>
      isEditingAllowed && (
        <CommentCreate
          workspaceSlug={workspaceSlug}
          entityId={entityId}
          activityOperations={activityOperations}
          projectId={projectId}
        />
      ),
    [isEditingAllowed, workspaceSlug, entityId, activityOperations, projectId],
  );

  return (
    <div className="relative flex h-full flex-col gap-y-2 overflow-hidden">
      {renderCommentCreate}
      <div className="flex-grow overflow-y-auto py-4">
        {comments?.map((data, index) => {
          let comment;
          if (typeof data === "string") {
            comment = getCommentById?.(data);
          } else {
            comment = data;
          }

          if (!comment) return null;
          return (
            <CommentCard
              key={comment.id}
              workspaceSlug={workspaceSlug}
              entityId={entityId}
              comment={comment}
              activityOperations={activityOperations}
              disabled={!isEditingAllowed}
              ends={
                index === 0
                  ? "top"
                  : index === comments.length - 1
                    ? "bottom"
                    : undefined
              }
              projectId={projectId}
              showAccessSpecifier={showAccessSpecifier}
              showCopyLinkOption={showCopyLinkOption}
              enableReplies={enableReplies}
            />
          );
        })}
      </div>
    </div>
  );
});