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";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const ModemSettings = () => {
  const [showSettings, setShowSettings] = useState(false);
  const [showPwd, setShowPwd] = 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 = async (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",
        },
      ],
    };
    await modemMutation.mutateAsync(modemConfig);
  };

  return (
    <>
      <ModemToggle
        showSettings={showSettings}
        onShowSettings={setShowSettings}
      />
      {!showSettings && (
        <Formik
          initialValues={inititalValues}
          onSubmit={handleSubmit}
          enableReinitialize
        >
          {({ isSubmitting }) => (
            <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>
                <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"
                  />
                  <FontAwesomeIcon
                    type="button"
                    className="absolute right-5 end-0"
                    onClick={() => setShowPwd((s) => !s)}
                    icon={showPwd ? faEyeSlash : faEye}
                  />
                </div>
              </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%]"
              >
                {isSubmitting || modemMutation.isPending
                  ? "Saving..."
                  : "Save Modem settings"}
              </button>
            </Form>
          )}
        </Formik>
      )}
    </>
  );
};

export default ModemSettings;