import { observer } from "mobx-react";
import type { Dispatch, SetStateAction } from "react";
// buzzwareTech imports
import { cn } from "@buzzwaretech/utils";
// hooks
import { useNotification } from "@/hooks/store/notifications/use-notification";
// local imports
import { NotificationItemArchiveOption } from "./archive";
import { NotificationItemReadOption } from "./read";
import { NotificationItemSnoozeOption } from "./snooze";

type TNotificationOption = {
  workspaceSlug: string;
  notificationId: string;
  isSnoozeStateModalOpen: boolean;
  setIsSnoozeStateModalOpen: Dispatch<SetStateAction<boolean>>;
  customSnoozeModal: boolean;
  setCustomSnoozeModal: Dispatch<SetStateAction<boolean>>;
};

export const NotificationOption = observer(function NotificationOption(
  props: TNotificationOption,
) {
  const {
    workspaceSlug,
    notificationId,
    isSnoozeStateModalOpen,
    setIsSnoozeStateModalOpen,
    customSnoozeModal,
    setCustomSnoozeModal,
  } = props;
  // hooks
  const notification = useNotification(notificationId);

  return (
    <div
      className={cn(
        "hidden flex-shrink-0 text-body-xs-medium group-hover:block",
        {
          block: isSnoozeStateModalOpen,
        },
      )}
    >
      <div className="relative flex items-center justify-center gap-2">
        {/* read */}
        <NotificationItemReadOption
          workspaceSlug={workspaceSlug}
          notification={notification}
        />

        {/* archive */}
        <NotificationItemArchiveOption
          workspaceSlug={workspaceSlug}
          notification={notification}
        />

        {/* snooze notification */}
        <NotificationItemSnoozeOption
          workspaceSlug={workspaceSlug}
          notification={notification}
          setIsSnoozeStateModalOpen={setIsSnoozeStateModalOpen}
          customSnoozeModal={customSnoozeModal}
          setCustomSnoozeModal={setCustomSnoozeModal}
        />
      </div>
    </div>
  );
});