import { Paperclip } from "lucide-react";
import { observer } from "mobx-react";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
import { IssueActivityBlockComponent, IssueLink } from "./";

type TIssueAttachmentActivity = {
  activityId: string;
  showIssue?: boolean;
  ends: "top" | "bottom" | undefined;
};

export const IssueAttachmentActivity = observer(
  function IssueAttachmentActivity(props: TIssueAttachmentActivity) {
    const { activityId, showIssue = true, ends } = props;
    // hooks
    const {
      activity: { getActivityById },
    } = useIssueDetail();

    const activity = getActivityById(activityId);

    if (!activity) return <></>;
    return (
      <IssueActivityBlockComponent
        icon={
          <Paperclip size={14} className="text-secondary" aria-hidden="true" />
        }
        activityId={activityId}
        ends={ends}
      >
        <>
          {activity.verb === "created"
            ? `uploaded a new attachment`
            : `removed an attachment`}
          {showIssue && (activity.verb === "created" ? ` to ` : ` from `)}
          {showIssue && <IssueLink activityId={activityId} />}.
        </>
      </IssueActivityBlockComponent>
    );
  },
);