import { observer } from "mobx-react";
// buzzwareTech imports
import type { TIssueServiceType, TWorkItemWidgets } from "@buzzwaretech/types";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// BuzzwareTech-web
import { WorkItemAdditionalWidgetCollapsibles } from "@/buzzwareTech-web/components/issues/issue-detail-widgets/collapsibles";
import { useTimeLineRelationOptions } from "@/buzzwareTech-web/components/relations";
// local imports
import { AttachmentsCollapsible } from "./attachments";
import { LinksCollapsible } from "./links";
import { RelationsCollapsible } from "./relations";
import { SubIssuesCollapsible } from "./sub-issues";

type Props = {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
  disabled: boolean;
  issueServiceType: TIssueServiceType;
  hideWidgets?: TWorkItemWidgets[];
};

export const IssueDetailWidgetCollapsibles = observer(
  function IssueDetailWidgetCollapsibles(props: Props) {
    const {
      workspaceSlug,
      projectId,
      issueId,
      disabled,
      issueServiceType,
      hideWidgets,
    } = props;
    // store hooks
    const {
      issue: { getIssueById },
      subIssues: { subIssuesByIssueId },
      attachment: {
        getAttachmentsCountByIssueId,
        getAttachmentsUploadStatusByIssueId,
      },
      relation: { getRelationCountByIssueId },
    } = useIssueDetail(issueServiceType);
    // derived values
    const issue = getIssueById(issueId);
    const subIssues = subIssuesByIssueId(issueId);
    const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
    const issueRelationsCount = getRelationCountByIssueId(
      issueId,
      ISSUE_RELATION_OPTIONS,
    );
    // render conditions
    const shouldRenderSubIssues =
      !!subIssues &&
      subIssues.length > 0 &&
      !hideWidgets?.includes("sub-work-items");
    const shouldRenderRelations =
      issueRelationsCount > 0 && !hideWidgets?.includes("relations");
    const shouldRenderLinks =
      !!issue?.link_count &&
      issue?.link_count > 0 &&
      !hideWidgets?.includes("links");
    const attachmentUploads = getAttachmentsUploadStatusByIssueId(issueId);
    const attachmentsCount = getAttachmentsCountByIssueId(issueId);
    const shouldRenderAttachments =
      attachmentsCount > 0 ||
      (!!attachmentUploads &&
        attachmentUploads.length > 0 &&
        !hideWidgets?.includes("attachments"));

    return (
      <div className="flex flex-col">
        {shouldRenderSubIssues && (
          <SubIssuesCollapsible
            workspaceSlug={workspaceSlug}
            projectId={projectId}
            issueId={issueId}
            disabled={disabled}
            issueServiceType={issueServiceType}
          />
        )}
        {shouldRenderRelations && (
          <RelationsCollapsible
            workspaceSlug={workspaceSlug}
            issueId={issueId}
            disabled={disabled}
            issueServiceType={issueServiceType}
          />
        )}
        {shouldRenderLinks && (
          <LinksCollapsible
            workspaceSlug={workspaceSlug}
            projectId={projectId}
            issueId={issueId}
            disabled={disabled}
            issueServiceType={issueServiceType}
          />
        )}
        {shouldRenderAttachments && (
          <AttachmentsCollapsible
            workspaceSlug={workspaceSlug}
            projectId={projectId}
            issueId={issueId}
            disabled={disabled}
            issueServiceType={issueServiceType}
          />
        )}
        <WorkItemAdditionalWidgetCollapsibles
          disabled={disabled}
          hideWidgets={hideWidgets ?? []}
          issueServiceType={issueServiceType}
          projectId={projectId}
          workItemId={issueId}
          workspaceSlug={workspaceSlug}
        />
      </div>
    );
  },
);