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

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

const CameraSettingFields = () => {
  const initialValues = {
    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";
    console.log(errors);
    return errors;
  };

  const handleSubmit = (values: CameraSettingValues) => {
    // post values to endpoint
    console.log(values);
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validate={validateValues}
      validateOnChange={false}
    >
      {({ errors }) => {
        return (
          <Form className="flex flex-col space-y-4 p-2">
            <div className="flex flex-col space-y-2">
              <label htmlFor="friendlyName" className="relative">
                Friendly Name
              </label>
              {errors.friendlyName && (
                <small className="absolute right-0 text-red-500">
                  {errors?.friendlyName}
                </small>
              )}
              <Field
                name={"friendlyName"}
                type="text"
                className="p-2 border border-gray-400 rounded-lg"
                placeholder="Enter camera name"
              />
            </div>
            <div className="flex flex-col">
              <label htmlFor="setupCamera" className="relative">
                Setup Camera
              </label>

              <Field
                as="select"
                name="setupCamera"
                className="p-2 border border-gray-400 rounded-lg text-white"
              >
                <option value={1} className="bg-[#253445]">
                  1
                </option>
                <option value={2} className="bg-[#253445]">
                  2
                </option>
                <option value={3} className="bg-[#253445]">
                  3
                </option>
                <option value={4} className="bg-[#253445]">
                  4
                </option>
              </Field>
            </div>
            <div className="flex flex-col">
              <label htmlFor="cameraAddress">Camera Address</label>
              {errors.cameraAddress && (
                <small className="absolute right-0 text-red-500">
                  {errors?.cameraAddress}
                </small>
              )}
              <Field
                name={"cameraAddress"}
                type="text"
                className="p-2 border border-gray-400 rounded-lg"
                placeholder="123, London Road..."
              />
            </div>
            <div className="flex flex-col">
              <label htmlFor="userName">User Name</label>
              {errors.userName && (
                <small className="absolute right-0 text-red-500">
                  {errors?.userName}
                </small>
              )}
              <Field
                name={"userName"}
                type="text"
                className="p-2 border border-gray-400 rounded-lg"
                placeholder="Enter user name"
              />
            </div>
            <div className="flex flex-col">
              <label htmlFor="password">Password</label>
              {errors.password && (
                <small className="absolute right-0 text-red-500">
                  {errors?.password}
                </small>
              )}
              <Field
                name={"password"}
                type="password"
                className="p-2 border border-gray-400 rounded-lg"
                placeholder="Enter password"
              />
            </div>
            <button
              type="submit"
              className="bg-blue-800 rounded-lg p-2  mx-auto"
            >
              Save settings
            </button>
          </Form>
        );
      }}
    </Formik>
  );
};

export default CameraSettingFields;