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

import { Formik, Field, Form } from "formik";
import FormGroup from "../components/FormGroup";
import { handleSoftReboot, handleHardReboot } from "./Reboots";
import { handleSystemSave } from "./SettingSaveRecall";
import { timezones } from "./timezones";
import SystemFileUpload from "./SystemFileUpload";
import type { SystemValues, SystemValuesErrors } from "../../../types/types";

const SystemConfigFields = () => {
  const initialvalues: SystemValues = {
    deviceName: "",
    timeZone: "",
    sntpServer: "",
    sntpInterval: 60,
    softwareUpdate: null,
  };

  const handleSubmit = (values: SystemValues) => handleSystemSave(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;
  };

  return (
    <Formik
      initialValues={initialvalues}
      onSubmit={handleSubmit}
      validate={validateValues}
    >
      {({ values, errors, touched }) => (
        <Form className="flex flex-col space-y-5">
          <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"
            />
          </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"
            >
              {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"
            />
          </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}
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
            />
          </FormGroup>
          <button
            type="submit"
            className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
          >
            Save System Settings
          </button>
          <SystemFileUpload
            name={"softwareUpdate"}
            selectedFile={values.softwareUpdate}
          />
          <button
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
            onClick={handleSoftReboot}
          >
            Software Reboot
          </button>
          <button
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
            onClick={handleHardReboot}
          >
            Hardware Reboot
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SystemConfigFields;