Mav-Mobile-UI/src/components/CameraSettings/CameraSettingFields.tsx

import { Formik, Field, Form } from "formik";
import type { CameraConfig, CameraSettingErrorValues, CameraSettingValues, ZoomInOptions } from "../../types/types";
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 { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";

type CameraSettingsProps = {
  initialData: CameraConfig;
  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
  zoomLevel?: number;
  onZoomLevelChange?: (level: number | undefined) => void;
  updateCameraConfigError: null | Error;
};

const CameraSettingFields = ({
  initialData,
  updateCameraConfig,
  zoomLevel,
  onZoomLevelChange,
  updateCameraConfigError,
}: CameraSettingsProps) => {
  const [showPwd, setShowPwd] = useState(false);
  const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
  const zoomOptions = [1, 2, 4];
  const magnification = query?.data?.propMagnification?.value;
  const apiZoom = reverseZoomMapping(magnification);
  const parsed = parseRTSPUrl(initialData?.propURI?.value);

  useEffect(() => {
    if (!query?.data) return;
    onZoomLevelChange?.(apiZoom);
  }, [query?.data, onZoomLevelChange]);

  // const getZoomLevel = (levelstring: string | undefined) => {
  //   console.log(levelstring);
  //   switch (levelstring) {
  //     case "1x":
  //       return 1;

  //     case "2x":
  //       return 2;

  //     case "4x":
  //       return 4;

  //     default:
  //       return 1;
  //   }
  // };

  const initialValues = useMemo<CameraSettingValues>(
    () => ({
      friendlyName: initialData?.id ?? "",
      cameraAddress: initialData?.propURI?.value ?? "",
      userName: parsed?.username ?? "",
      password: parsed?.password ?? "",
      id: initialData?.id,

      zoom: apiZoom,
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [initialData?.id, initialData?.propURI?.value, zoomLevel]
  );

  const validateValues = (values: CameraSettingValues) => {
    const errors: CameraSettingErrorValues = {};
    if (!values.friendlyName) errors.friendlyName = "Required";
    if (!values.cameraAddress) errors.cameraAddress = "Required";
    return errors;
  };

  const handleSubmit = (values: CameraSettingValues) => {
    updateCameraConfig(values);
  };

  const handleRadioButtonChange = async (levelNumber: number) => {
    if (!onZoomLevelChange || !zoomLevel) return;
    const text = zoomMapping(levelNumber);
    onZoomLevelChange(levelNumber);

    const zoomInOptions: ZoomInOptions = {
      camera: cameraControllerSide,
      multiplier: levelNumber,
      multiplierText: text,
    };

    mutation.mutate(zoomInOptions);
  };
  const selectedZoom = zoomLevel ?? 1;
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validate={validateValues}
      validateOnChange={false}
      enableReinitialize
    >
      {({ errors, touched }) => (
        <Form className="flex flex-col space-y-6 p-2">
          <div className="flex flex-col space-y-2 relative">
            <label htmlFor="friendlyName">Name</label>
            {touched.friendlyName && errors.friendlyName && (
              <small className="absolute right-0 top-0 text-red-500">{errors.friendlyName}</small>
            )}
            <Field
              id="friendlyName"
              name="friendlyName"
              type="text"
              className="p-2 border border-gray-400 rounded-lg"
              placeholder="Enter camera name"
              disabled
            />
          </div>

          <div className="flex flex-col space-y-2 relative">
            <label htmlFor="cameraAddress">Camera Address</label>
            {touched.cameraAddress && errors.cameraAddress && (
              <small className="absolute right-0 top-0 text-red-500">{errors.cameraAddress}</small>
            )}
            <Field
              id="cameraAddress"
              name="cameraAddress"
              type="text"
              className="p-2 border border-gray-400 rounded-lg"
              placeholder="RTSP://..."
              disabled
            />
          </div>

          <div className="flex flex-col space-y-2 relative">
            <label htmlFor="userName">User Name</label>
            {touched.userName && errors.userName && (
              <small className="absolute right-0 top-0 text-red-500">{errors.userName}</small>
            )}
            <Field
              id="userName"
              name="userName"
              type="text"
              className="p-2 border border-gray-400 rounded-lg"
              placeholder="Enter user name"
              autoComplete="username"
              disabled
            />
          </div>

          <div className="flex flex-col space-y-2 relative">
            <label htmlFor="password">Password</label>
            {touched.password && errors.password && (
              <small className="absolute right-0 top-0 text-red-500">{errors.password}</small>
            )}
            <div className="flex gap-2 items-center relative mb-4">
              <Field
                id="password"
                name="password"
                type={showPwd ? "text" : "password"}
                className="p-2 border border-gray-400 rounded-lg w-full "
                placeholder="Enter password"
                disabled
              />
              <FontAwesomeIcon
                type="button"
                className="absolute right-5 end-0"
                onClick={() => setShowPwd((s) => !s)}
                icon={showPwd ? faEyeSlash : faEye}
              />
            </div>
            <div className="my-3">
              <CardHeader title="Zoom settings" />
              <div className="mx-auto grid grid-cols-3 place-items-center">
                {zoomOptions.map((zoom) => (
                  <div key={zoom} className="my-3">
                    <Field
                      type="radio"
                      name="zoom"
                      value={zoom.toString()}
                      checked={selectedZoom === zoom}
                      className="hidden peer"
                      id={`zoom${zoom}`}
                      onChange={() => handleRadioButtonChange(zoom)}
                    />
                    <label
                      htmlFor={`zoom${zoom}`}
                      className="px-6 py-2 rounded-md border border-gray-300 
                   peer-checked:border-2 peer-checked:border-blue-900  
                   peer-checked:text-blue-600 peer-checked:bg-gray-100"
                    >
                      {zoomMapping(zoom)}
                    </label>
                  </div>
                ))}
              </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
                </button>
              ) : (
                <button
                  type="submit"
                  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"}
                </button>
              )}
            </div>
          </div>
        </Form>
      )}
    </Formik>
  );
};

export default CameraSettingFields;