-address fixes and changes per feedback from Matt and Brad

src/components/CameraSettings/CameraSettingFields.tsx

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
-import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
 import { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type CameraSettingsProps = {
@@ -20,16 +20,21 @@ const CameraSettingFields = ({
   updateCameraConfig,
   zoomLevel,
   onZoomLevelChange,
-  updateCameraConfigError,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
+
   const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
+  const { cameraModeQuery, cameraModeMutation } = useCameraMode({ camera: cameraControllerSide });
   const zoomOptions = [1, 2, 4];
   const magnification = query?.data?.propMagnification?.value;
   const apiZoom = reverseZoomMapping(magnification);
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
+  const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
 
+  const handleModeClick = async (mode: string) => {
+    await cameraModeMutation.mutate({ camera: cameraControllerSide, mode });
+  };
   useEffect(() => {
     if (!query?.data) return;
     onZoomLevelChange?.(apiZoom);
@@ -194,7 +199,30 @@ const CameraSettingFields = ({
                 ))}
               </div>
             </div>
-            <div className="mt-3">
+            <div>
+              <CardHeader title="Mode" />
+              <div className="mx-auto grid grid-cols-2 place-items-center">
+                <button
+                  type="button"
+                  onClick={() => handleModeClick("day")}
+                  className={`px-8 py-2 rounded-md border border-gray-300 ${
+                    cameraMode === "day" ? "bg-gray-100 text-blue-600" : ""
+                  }`}
+                >
+                  Day
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleModeClick("night")}
+                  className={`px-8 py-2 rounded-md border border-gray-300 ${
+                    cameraMode === "night" ? "bg-gray-100 text-blue-600" : ""
+                  }`}
+                >
+                  Night
+                </button>
+              </div>
+            </div>
+            {/* <div className="mt-3">
               {updateCameraConfigError ? (
                 <button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full" disabled>
                   Retry
@@ -205,11 +233,10 @@ const CameraSettingFields = ({
                   className="bg-blue-700 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
                   disabled
                 >
-                  {/* {isSubmitting ? "Saving" : "Save settings"} bg-[#26B170] */}
-                  {"Disabled: Coming soon"}
+                  {isSubmitting ? "Saving" : "Save settings"}
                 </button>
               )}
-            </div>
+            </div> */}
           </div>
         </Form>
       )}