import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/shared/common/ui/alert-dialog";
import { Button } from "@/shared/common/ui/button";
import { useEmployeePositions } from "@/user-management/hooks/useEmployeePostions";
import { useQueryClient } from "@tanstack/react-query";
import { Loader2 } from "lucide-react";

interface DeactivateTeamMemberDialogProps {
  isOpen: boolean;
  onClose: () => void;
  userId: string;
  teamMemberName: string;
}

export const DeactivateTeamMemberDialog: React.FC<
  DeactivateTeamMemberDialogProps
> = ({ isOpen, onClose, userId, teamMemberName }) => {
  const { deactivateUser, isDeActivatingUser } = useEmployeePositions();
 
  const queryClient = useQueryClient();


  const onDelete = async () => {
    try {
      await deactivateUser({
        payload: userId,
        successCallback: () => {
          queryClient.invalidateQueries({
            queryKey: ["positionEmployees"],
            exact: true,
          });
          onClose();
        },
      });
    } catch (error) {
      console.error("Error deactivating user:", error);
    }
  };
  return (
    <AlertDialog open={isOpen} onOpenChange={onClose}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>
            Deactivate team member from organization?
          </AlertDialogTitle>
          <AlertDialogDescription>
            Are you sure you want to deactivate <strong>{teamMemberName}</strong>? This will remove their access from the organization. This action can be reversed only by activating them again through the Archived Users section by contacting the administrator.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isDeActivatingUser}>
            Cancel
          </AlertDialogCancel>
          <Button
            variant="destructive"
            onClick={onDelete}
            disabled={isDeActivatingUser}>
            {isDeActivatingUser && (
              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
            )}
            Deactivate
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};

export default DeactivateTeamMemberDialog;
