Mav-Mobile-UI/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

import { Formik, Form, Field } from "formik";
import FormGroup from "../components/FormGroup";
import type { ModemSettingsType } from "../../../types/types";
import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
import { useEffect, useState } from "react";
import ModemToggle from "./ModemToggle";

const ModemSettings = () => {
  const [showSettings, setShowSettings] = useState(false);
  const { modemQuery, modemMutation } = useWifiAndModem();

  const apn = modemQuery?.data?.propAPN?.value;
  const username = modemQuery?.data?.propUsername.value;
  const password = modemQuery?.data?.propPassword?.value;
  const mode = modemQuery?.data?.propMode?.value;

  useEffect(() => {
    setShowSettings(mode === "AUTO");
  }, [mode]);

  const inititalValues = {
    apn: apn ?? "",
    username: username ?? "",
    password: password ?? "",
    authenticationType: "PAP",
  };

  const handleSubmit = (values: ModemSettingsType) => {
    const modemConfig = {
      id: "ModemAndWifiManager-modem",
      fields: [
        {
          property: "propAPN",
          value: values.apn,
        },
        {
          property: "propPassword",
          value: values.password,
        },
        {
          property: "propUsername",
          value: values.username,
        },

        {
          property: "propMode",
          value: showSettings ? "AUTO" : "MANUAL",
        },
      ],
    };
    modemMutation.mutate(modemConfig);
  };

  return (
    <>
      <ModemToggle
        showSettings={showSettings}
        onShowSettings={setShowSettings}
      />
      {!showSettings && (
        <Formik
          initialValues={inititalValues}
          onSubmit={handleSubmit}
          enableReinitialize
        >
          <Form className="flex flex-col space-y-5 px-2">
            <FormGroup>
              <label
                htmlFor="apn"
                className="font-medium whitespace-nowrap md:w-2/3"
              >
                APN
              </label>
              <Field
                placeholder="Enter APN"
                name="apn"
                id="apn"
                type="text"
                className="p-1.5 border border-gray-400 rounded-lg"
              />
            </FormGroup>
            <FormGroup>
              <label
                htmlFor="username"
                className="font-medium whitespace-nowrap md:w-2/3"
              >
                Username
              </label>
              <Field
                placeholder="Enter Username"
                name="username"
                id="username"
                type="text"
                className="p-1.5 border border-gray-400 rounded-lg"
              />
            </FormGroup>
            <FormGroup>
              <label
                htmlFor="password"
                className="font-medium whitespace-nowrap md:w-2/3"
              >
                Password
              </label>
              <Field
                placeholder="Enter Password"
                name="password"
                id="password"
                type="text"
                className="p-1.5 border border-gray-400 rounded-lg"
              />
            </FormGroup>
            <FormGroup>
              <label
                htmlFor="password"
                className="font-medium whitespace-nowrap md:w-2/3"
              >
                Password
              </label>
              <Field
                name="authenticationType"
                as="select"
                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
              >
                <option value="PAP">PAP</option>
                <option value="CHAP">CHAP</option>
                <option value="none">None</option>
              </Field>
            </FormGroup>
            <button
              type="submit"
              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
            >
              Save Modem settings
            </button>
          </Form>
        </Formik>
      )}
    </>
  );
};

export default ModemSettings;