import { CloseIcon } from "@buzzwaretech/propel/icons";
import { Loader } from "lucide-react";
import { observer } from "mobx-react";
import { useState } from "react";
// buzzwareTech imports
import { TOAST_TYPE, setToast } from "@buzzwaretech/propel/toast";
import { Tooltip } from "@buzzwaretech/propel/tooltip";
import type { IState, TStateOperationsCallbacks } from "@buzzwaretech/types";
import { AlertModalCore } from "@buzzwaretech/ui";
import { cn } from "@buzzwaretech/utils";
// hooks
import { usePlatformOS } from "@/hooks/use-platform-os";

type TStateDelete = {
  totalStates: number;
  state: IState;
  deleteStateCallback: TStateOperationsCallbacks["deleteState"];
  shouldTrackEvents?: boolean;
};

export const StateDelete = observer(function StateDelete(props: TStateDelete) {
  const { totalStates, state, deleteStateCallback } = props;
  // hooks
  const { isMobile } = usePlatformOS();
  // states
  const [isDeleteModal, setIsDeleteModal] = useState(false);
  const [isDelete, setIsDelete] = useState(false);
  // derived values
  const isDeleteDisabled = state.default
    ? true
    : totalStates === 1
      ? true
      : false;

  const handleDeleteState = async () => {
    if (isDeleteDisabled) return;

    setIsDelete(true);

    try {
      await deleteStateCallback(state.id);
      setIsDelete(false);
    } catch (error) {
      const errorStatus = error as { status: number; data: { error: string } };
      if (errorStatus.status === 400) {
        setToast({
          type: TOAST_TYPE.ERROR,
          title: "Error!",
          message:
            "This state contains some work items within it, please move them to some other state to delete this state.",
        });
      } else {
        setToast({
          type: TOAST_TYPE.ERROR,
          title: "Error!",
          message: "State could not be deleted. Please try again.",
        });
      }
      setIsDelete(false);
    }
  };

  return (
    <>
      <AlertModalCore
        handleClose={() => setIsDeleteModal(false)}
        handleSubmit={handleDeleteState}
        isSubmitting={isDelete}
        isOpen={isDeleteModal}
        title="Delete State"
        content={
          <>
            Are you sure you want to delete state-{" "}
            <span className="font-medium text-primary">{state?.name}</span>? All
            of the data related to the state will be permanently removed. This
            action cannot be undone.
          </>
        }
      />

      <button
        type="button"
        className={cn(
          "flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors focus:outline-none",
          isDeleteDisabled
            ? "bg-surface-2 text-secondary"
            : "text-danger-primary hover:bg-layer-1",
        )}
        disabled={isDeleteDisabled}
        onClick={() => setIsDeleteModal(true)}
      >
        <Tooltip
          tooltipContent={
            state.default
              ? "Cannot delete the default state."
              : totalStates === 1
                ? `Cannot have an empty group.`
                : ``
          }
          isMobile={isMobile}
          disabled={!isDeleteDisabled}
          className="focus:outline-none"
        >
          {isDelete ? (
            <Loader className="h-3.5 w-3.5 text-secondary" />
          ) : (
            <CloseIcon className="h-3.5 w-3.5" />
          )}
        </Tooltip>
      </button>
    </>
  );
});