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 } from "../../utils/utils";

type CameraSettingsProps = {
  initialData: CameraConfig;
  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
  zoomLevel?: number;
  onZoomLevelChange?: (level: number) => 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, 8];

  const parsed = parseRTSPUrl(initialData?.propURI?.value);

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

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

      case "2x":
        return 2;

      case "4x":
        return 4;

      case "8x":
        return 8;
      default:
        return 1;
    }
  };

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

      zoom: zoomLevel,
    }),
    // 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;
    onZoomLevelChange(levelNumber);

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

    mutation.mutate(zoomInOptions);
  };
  const selectedZoom = zoomLevel ?? 1;
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validate={validateValues}
      validateOnChange={false}
      enableReinitialize
    >
      {({ errors, touched, isSubmitting }) => (
        <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"
            />
          </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://..."
              autoComplete="street-address"
            />
          </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"
            />
          </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"
                autoComplete="new-password"
              />
              <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-4 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"
                    >
                      x{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">
                  Retry
                </button>
              ) : (
                <button
                  type="submit"
                  className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"
                >
                  {isSubmitting ? "Saving" : "Save settings"}
                </button>
              )}
            </div>
          </div>
        </Form>
      )}
    </Formik>
  );
};

export default CameraSettingFields;