import { toast } from "sonner";
import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
import { useBlackBoard } from "../../../../../hooks/useBlackBoard";
import ModalComponent from "../../../../../ui/ModalComponent";

type ResetAllModalProps = {
  isResetAllModalOpen: boolean;
  handleClose: () => void;
};

const ResetAllModal = ({ isResetAllModalOpen, handleClose }: ResetAllModalProps) => {
  const { state, dispatch } = useCameraFeedContext();
  const { blackboardMutation } = useBlackBoard();

  const handleResetAll = async () => {
    dispatch({ type: "RESET_CAMERA_FEED" });

    handleClose();
    const result = await blackboardMutation.mutateAsync({
      operation: "INSERT",
      path: `cameraFeed`,
      value: state,
    });
    //  Need endpoint to reset all target detection painted cells
    if (result?.reason === "OK") {
      toast.success("All camera settings have been reset to default values.");
    }
  };
  return (
    <ModalComponent isModalOpen={isResetAllModalOpen} close={handleClose}>
      <div>
        <h2 className="text-xl font-bold mb-4">Reset All Camera Settings</h2>
        <p className="mb-4">
          Are you sure you want to reset all camera settings to their default values? This action cannot be undone.
        </p>
        <div className="flex justify-end gap-4">
          <button
            onClick={handleResetAll}
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
          >
            Reset
          </button>
          <button
            onClick={handleClose}
            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer  "
          >
            Cancel
          </button>
        </div>
      </div>
    </ModalComponent>
  );
};

export default ResetAllModal;