import { observer } from "mobx-react";
// buzzwareTech imports
import type {
    E_SORT_ORDER,
    EActivityFilterType,
    TActivityFilters,
} from "@buzzwaretech/constants";
import {
    BASE_ACTIVITY_FILTER_TYPES,
    filterActivityOnSelectedFilters,
} from "@buzzwaretech/constants";
import type { TCommentsOperations } from "@buzzwaretech/types";
// components
import { CommentCard } from "@/components/comments/card/root";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// buzzwareTech web components
import { IssueAdditionalPropertiesActivity } from "@/buzzwareTech-web/components/issues/issue-details/issue-properties-activity";
import { IssueActivityWorklog } from "@/buzzwareTech-web/components/issues/worklog/activity/root";
// local imports
import { IssueActivityItem } from "./activity/activity-list";
import { IssueActivityLoader } from "./loader";

type TIssueActivityCommentRoot = {
  workspaceSlug: string;
  projectId: string;
  isIntakeIssue: boolean;
  issueId: string;
  selectedFilters: TActivityFilters[];
  activityOperations: TCommentsOperations;
  showAccessSpecifier?: boolean;
  disabled?: boolean;
  sortOrder: E_SORT_ORDER;
};

export const IssueActivityCommentRoot = observer(
  function IssueActivityCommentRoot(props: TIssueActivityCommentRoot) {
    const {
      workspaceSlug,
      isIntakeIssue,
      issueId,
      selectedFilters,
      activityOperations,
      showAccessSpecifier,
      projectId,
      disabled,
      sortOrder,
    } = props;
    // store hooks
    const {
      activity: { getActivityAndCommentsByIssueId },
      comment: { getCommentById },
    } = useIssueDetail();
    // derived values
    const activityAndComments = getActivityAndCommentsByIssueId(
      issueId,
      sortOrder,
    );

    if (!activityAndComments) return <IssueActivityLoader />;

    if (activityAndComments.length <= 0) return null;

    const filteredActivityAndComments = filterActivityOnSelectedFilters(
      activityAndComments,
      selectedFilters,
    );

    return (
      <div>
        {filteredActivityAndComments.map((activityComment, index) => {
          const comment = getCommentById(activityComment.id);
          return activityComment.activity_type === "COMMENT" ? (
            <CommentCard
              key={activityComment.id}
              workspaceSlug={workspaceSlug}
              entityId={issueId}
              comment={comment}
              activityOperations={activityOperations}
              ends={
                index === 0
                  ? "top"
                  : index === filteredActivityAndComments.length - 1
                    ? "bottom"
                    : undefined
              }
              showAccessSpecifier={!!showAccessSpecifier}
              showCopyLinkOption={!isIntakeIssue}
              disabled={disabled}
              projectId={projectId}
              enableReplies
            />
          ) : BASE_ACTIVITY_FILTER_TYPES.includes(
              activityComment.activity_type as EActivityFilterType,
            ) ? (
            <IssueActivityItem
              key={activityComment.id}
              activityId={activityComment.id}
              ends={
                index === 0
                  ? "top"
                  : index === filteredActivityAndComments.length - 1
                    ? "bottom"
                    : undefined
              }
            />
          ) : activityComment.activity_type ===
            "ISSUE_ADDITIONAL_PROPERTIES_ACTIVITY" ? (
            <IssueAdditionalPropertiesActivity
              key={activityComment.id}
              activityId={activityComment.id}
              ends={
                index === 0
                  ? "top"
                  : index === filteredActivityAndComments.length - 1
                    ? "bottom"
                    : undefined
              }
            />
          ) : activityComment.activity_type === "WORKLOG" ? (
            <IssueActivityWorklog
              key={activityComment.id}
              workspaceSlug={workspaceSlug}
              projectId={projectId}
              issueId={issueId}
              activityComment={activityComment}
              ends={
                index === 0
                  ? "top"
                  : index === filteredActivityAndComments.length - 1
                    ? "bottom"
                    : undefined
              }
            />
          ) : (
            <></>
          );
        })}
      </div>
    );
  },
);