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

import { Formik, Field, Form } from "formik";
import type {
  CameraSettingErrorValues,
  CameraSettingValues,
} from "../../types/types";
import { toast } from "sonner";

const CameraSettingFields = () => {
  const initialValues: CameraSettingValues = {
    friendlyName: "",
    cameraAddress: "",
    userName: "",
    password: "",
    setupCamera: 1,
  };

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

  const handleSubmit = (values: CameraSettingValues) => {
    // post values to endpoint
    toast("Settings Saved");
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validate={validateValues}
      validateOnChange={false}
    >
      {({ errors, touched, setFieldValue }) => (
        <Form className="flex flex-col space-y-4 p-2">
          <div className="flex flex-col space-y-2 relative">
            <label htmlFor="friendlyName">Friendly 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="setupCamera">Setup Camera</label>
            <Field
              as="select"
              id="setupCamera"
              name="setupCamera"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                setFieldValue("setupCamera", parseInt(e.target.value, 10))
              }
            >
              <option value={1}>1</option>
              <option value={2}>2</option>
              <option value={3}>3</option>
              <option value={4}>4</option>
            </Field>
          </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="123, London Road..."
              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>
            )}
            <Field
              id="password"
              name="password"
              type="password"
              className="p-2 border border-gray-400 rounded-lg"
              placeholder="Enter password"
              autoComplete="new-password"
            />
          </div>

          <button
            type="submit"
            className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
          >
            Save settings
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default CameraSettingFields;