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} />

      <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
        {({ isSubmitting }) => (
          <Form className="flex flex-col space-y-5 px-2">
            {!showSettings && (
              <>
                <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="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
            >
              {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
            </button>
          </Form>
        )}
      </Formik>
    </>
  );
};

export default ModemSettings;