import { useTranslation } from "@buzzwaretech/i18n";
import type { TIssueServiceType } from "@buzzwaretech/types";
import { EIssueServiceType } from "@buzzwaretech/types";
import { CollapsibleButton } from "@buzzwaretech/ui";
import { observer } from "mobx-react";
import { useMemo } from "react";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// local imports
import { IssueAttachmentActionButton } from "./quick-action-button";

type Props = {
  isOpen: boolean;
  workspaceSlug: string;
  projectId: string;
  issueId: string;
  disabled: boolean;
  issueServiceType?: TIssueServiceType;
};

export const IssueAttachmentsCollapsibleTitle = observer(
  function IssueAttachmentsCollapsibleTitle(props: Props) {
    const {
      isOpen,
      workspaceSlug,
      projectId,
      issueId,
      disabled,
      issueServiceType = EIssueServiceType.ISSUES,
    } = props;
    const { t } = useTranslation();
    // store hooks
    const {
      issue: { getIssueById },
    } = useIssueDetail(issueServiceType);

    // derived values
    const issue = getIssueById(issueId);
    const attachmentCount = issue?.attachment_count ?? 0;

    // indicator element
    const indicatorElement = useMemo(
      () => (
        <span className="flex items-center justify-center">
          <p className="text-14 !leading-3 text-tertiary">{attachmentCount}</p>
        </span>
      ),
      [attachmentCount],
    );

    return (
      <CollapsibleButton
        isOpen={isOpen}
        title={t("common.attachments")}
        indicatorElement={indicatorElement}
        actionItemElement={
          !disabled && (
            <IssueAttachmentActionButton
              workspaceSlug={workspaceSlug}
              projectId={projectId}
              issueId={issueId}
              disabled={disabled}
              issueServiceType={issueServiceType}
            />
          )
        }
      />
    );
  },
);