import { RotateCcw } from "lucide-react";
import { observer } from "mobx-react";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { ArchiveIcon } from "@buzzwaretech/propel/icons";
// components
import { IssueActivityBlockComponent } from "./";
// ui

type TIssueArchivedAtActivity = {
  activityId: string;
  ends: "top" | "bottom" | undefined;
};

export const IssueArchivedAtActivity = observer(
  function IssueArchivedAtActivity(props: TIssueArchivedAtActivity) {
    const { activityId, ends } = props;
    // hooks
    const {
      activity: { getActivityById },
    } = useIssueDetail();

    const activity = getActivityById(activityId);

    if (!activity) return <></>;

    return (
      <IssueActivityBlockComponent
        icon={
          activity.new_value === "restore" ? (
            <RotateCcw
              className="h-3.5 w-3.5 text-secondary"
              aria-hidden="true"
            />
          ) : (
            <ArchiveIcon
              className="h-3.5 w-3.5 text-secondary"
              aria-hidden="true"
            />
          )
        }
        activityId={activityId}
        ends={ends}
        customUserName={activity.new_value === "archive" ? "BuzzwareTech" : undefined}
      >
        {activity.new_value === "restore"
          ? "restored the work item"
          : "archived the work item"}
        .
      </IssueActivityBlockComponent>
    );
  },
);