import { observer } from "mobx-react";
// buzzwareTech imports
import { useTranslation } from "@buzzwaretech/i18n";
import type { TIssueServiceType } from "@buzzwaretech/types";
import { EIssueServiceType } from "@buzzwaretech/types";
import { CircularProgressIndicator, CollapsibleButton } from "@buzzwaretech/ui";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { SubWorkItemTitleActions } from "./title-actions";

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

export const SubIssuesCollapsibleTitle = observer(
  function SubIssuesCollapsibleTitle(props: Props) {
    const {
      isOpen,
      parentIssueId,
      disabled,
      issueServiceType = EIssueServiceType.ISSUES,
      projectId,
    } = props;
    // translation
    const { t } = useTranslation();
    // store hooks
    const {
      subIssues: { subIssuesByIssueId, stateDistributionByIssueId },
    } = useIssueDetail(issueServiceType);
    // derived values
    const subIssuesDistribution = stateDistributionByIssueId(parentIssueId);
    const subIssues = subIssuesByIssueId(parentIssueId);
    // if there are no sub-issues, return null
    if (!subIssues) return null;

    // calculate percentage of completed sub-issues
    const completedCount = subIssuesDistribution?.completed?.length ?? 0;
    const totalCount = subIssues.length;
    const percentage =
      completedCount && totalCount ? (completedCount / totalCount) * 100 : 0;

    return (
      <CollapsibleButton
        isOpen={isOpen}
        title={`${issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}`}
        indicatorElement={
          <div className="flex items-center gap-1.5 text-13 text-tertiary">
            <CircularProgressIndicator
              size={18}
              percentage={percentage}
              strokeWidth={3}
            />
            <span>
              {completedCount}/{totalCount} {t("common.done")}
            </span>
          </div>
        }
        actionItemElement={
          <SubWorkItemTitleActions
            projectId={projectId}
            parentId={parentIssueId}
            disabled={disabled}
            issueServiceType={issueServiceType}
          />
        }
      />
    );
  },
);