Mav-Mobile-UI/src/components/SettingForms/System/SystemConfigFields.tsx

import { Formik, Field, Form } from "formik";
import FormGroup from "../components/FormGroup";
import { useReboots } from "../../../hooks/useReboots";
import { timezones } from "./timezones";
import SystemFileUpload from "./SystemFileUpload";
import type { SystemValues, SystemValuesErrors } from "../../../types/types";
import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig";

const SystemConfigFields = () => {
  const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
  const { hardRebootMutation } = useReboots();
  const { dnsQuery, dnsMutation } = useDNSSettings();

  const dnsPrimary = dnsQuery?.data?.propNameServerPrimary?.value;
  const dnsSecondary = dnsQuery?.data?.propNameServerSecondary?.value;
  const initialvalues: SystemValues = {
    deviceName: systemSettingsData?.deviceName ?? "",
    timeZone: systemSettingsData?.timeZone ?? "",
    sntpServer: systemSettingsData?.sntpServer ?? "",
    sntpInterval: systemSettingsData?.sntpInterval ?? 60,
    serverPrimary: dnsPrimary ?? "",
    serverSecondary: dnsSecondary ?? "",
    softwareUpdate: null,
  };

  const handleSubmit = async (values: SystemValues) => {
    saveSystemSettings(values);
    await dnsMutation.mutateAsync(values);
  };

  const validateValues = (values: SystemValues) => {
    const errors: SystemValuesErrors = {};
    const interval = Number(values.sntpInterval);
    if (!values.deviceName) errors.deviceName = "Required";
    if (!values.timeZone) errors.timeZone = "Required";
    if (isNaN(interval) || interval <= 0) errors.sntpInterval = "Cannot be less than 0";
    if (!values.sntpServer) errors.sntpServer = "Required";
    return errors;
  };

  // const handleSoftReboot = async () => {
  //   await softRebootMutation.mutate();
  // };

  const handleHardReboot = async () => {
    await hardRebootMutation.mutate();
  };

  return (
    <Formik
      initialValues={initialvalues}
      onSubmit={handleSubmit}
      validate={validateValues}
      enableReinitialize
      validateOnChange
      validateOnBlur
    >
      {({ values, errors, touched, isSubmitting }) => (
        <Form className="flex flex-col space-y-5 px-2">
          <FormGroup>
            <label htmlFor="deviceName" className="font-medium whitespace-nowrap md:w-1/2 text-left">
              Device Name
            </label>
            {touched.deviceName && errors.deviceName && (
              <small className="absolute right-0 -top-5 text-red-500">{errors.deviceName}</small>
            )}
            <Field
              id="deviceName"
              name="deviceName"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter device name"
              autoComplete="off"
            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="timeZone" className="font-medium whitespace-nowrap md:w-1/2 text-left">
              Local Time Zone
            </label>
            {touched.timeZone && errors.timeZone && (
              <small className="absolute right-0 -top-5 text-red-500">{errors.timeZone}</small>
            )}
            <Field
              id="timeZone"
              name="timeZone"
              as="select"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full max-w-xs"
            >
              <option value="">Select a timezone…</option>
              {timezones.map((timezone) => (
                <option value={timezone.value} key={timezone.label}>
                  {timezone.label}
                </option>
              ))}
            </Field>
          </FormGroup>
          <FormGroup>
            <label htmlFor="sntpServer" className="font-medium whitespace-nowrap md:w-1/2 text-left">
              SNTP Server
            </label>
            {touched.sntpServer && errors.sntpServer && (
              <small className="absolute right-0 -top-5 text-red-500">{errors.sntpServer}</small>
            )}
            <Field
              id="sntpServer"
              name="sntpServer"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter SNTP server address"
              autoComplete="off"
            />
          </FormGroup>

          <FormGroup>
            <label htmlFor="sntpInterval" className="font-medium whitespace-nowrap md:w-1/2 text-left">
              SNTP Interval minutes
            </label>
            {touched.sntpInterval && errors.sntpInterval && (
              <small className="absolute right-0 -top-5 text-red-500">{errors.sntpInterval}</small>
            )}
            <Field
              id="sntpInterval"
              name="sntpInterval"
              type="number"
              min={1}
              inputMode="numeric"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="serverPrimary" className="font-medium whitespace-nowrap md:w-1/2 text-left">
              Primary DNS Server
            </label>

            <Field
              id="serverPrimary"
              name="serverPrimary"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter DNS primary address"
              autoComplete="off"
            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="serverSecondary" className="font-medium whitespace-nowrap md:w-1/2 text-left">
              Secondary DNS Server
            </label>

            <Field
              id="serverSecondary"
              name="serverSecondary"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter DNS secondary address"
              autoComplete="off"
            />
          </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"
            disabled={isSubmitting}
          >
            {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
          </button>
          <SystemFileUpload name={"softwareUpdate"} selectedFile={values.softwareUpdate} />
          <div className="border-b border-gray-600">
            <p>Reboot</p>
          </div>

          {/* <button
            type="button"
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition  w-full md:w-[50%]"
            onClick={handleSoftReboot}
          >
            {softRebootMutation.isPending || isSubmitting ? "Rebooting..." : "Software Reboot"}
          </button> */}
          <button
            type="button"
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
            onClick={handleHardReboot}
          >
            {hardRebootMutation.isPending || isSubmitting ? "Rebooting" : "Hardware Reboot"}
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SystemConfigFields;