BayIQ-UI/src/features/settings/components/SystemConfig.tsx

import { Formik, Form, Field } from "formik";
import { useSystemSettings } from "../hooks/useSystemSettings";
import type { SystemSettings } from "../../../types/types";
import { toast } from "sonner";

const SystemConfig = () => {
  const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings();

  const timeZoneOptions = systemSettingsQuery?.data?.propLocalTimeZone?.accepted;
  const timeZoneOpts = timeZoneOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
  const timeSourceOptions = systemSettingsQuery?.data?.propTimeSource?.accepted;
  const timeSourceOpts = timeSourceOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
  const deviceName = systemSettingsQuery?.data?.propDeviceName?.value;
  const timeZone = systemSettingsQuery?.data?.propLocalTimeZone?.value;
  const SNTPServer = systemSettingsQuery?.data?.propSNTPServer?.value;
  const SNTPInterval = systemSettingsQuery?.data?.propSNTPIntervalMinutes?.value;
  const timeSource = systemSettingsQuery?.data?.propTimeSource?.value;
  // const primaryServer = systemSettingsQuery?.data?.propPrimaryDNSServer?.value;
  // const secondaryServer = systemSettingsQuery?.data?.propSecondaryDNSServer?.value;

  const initialValues = {
    deviceName: deviceName ?? "",
    timeZone: timeZone ?? "",
    localTimeZone: timeZone ?? "",
    SNTPServer: SNTPServer ?? "",
    SNTPInterval: SNTPInterval ?? 60,
    SNTPIntervalMinutes: SNTPInterval ?? 60,
    primaryServer: "",
    secondaryServer: "",
    timeSource: timeSource ?? "",
  };

  const handleSubmit = async (values: SystemSettings) => {
    const result = await systemSettingsMutation.mutateAsync(values);
    console.log(result);
    if (result.id) {
      toast.success("System settings updated successfully");
    }
  };

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
      <Form>
        <div className="flex flex-row justify-between items-center mb-4">
          <label htmlFor="deviceName">Device Name</label>
          <Field
            name="deviceName"
            type="text"
            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
            placeholder="Enter device name"
            autoComplete="off"
          />
        </div>
        <div className="flex flex-row justify-between items-center mb-4">
          <label htmlFor="timeZone">Timezone</label>
          <Field
            name="timeZone"
            as="select"
            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
            autoComplete="off"
          >
            {timeZoneOpts?.map((option: string) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </Field>
        </div>
        <div className="flex flex-row justify-between items-center mb-4">
          <label htmlFor="timeSource">Time Source</label>
          <Field
            name="timeSource"
            as="select"
            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
            autoComplete="off"
          >
            {timeSourceOpts?.map((option: string) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </Field>
        </div>

        <div className="flex flex-row justify-between items-center mb-4">
          <label htmlFor="SNTPServer">SNTP Server</label>
          <Field
            name="SNTPServer"
            type="text"
            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
            placeholder="Enter SNTP server"
            autoComplete="off"
          />
        </div>
        <div className="flex flex-row justify-between items-center mb-4">
          <label htmlFor="SNTPInterval">SNTP Interval</label>
          <Field
            name="SNTPInterval"
            type="number"
            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
            placeholder="Enter SNTP interval"
            autoComplete="off"
          />
        </div>
        <div className="flex flex-row justify-between items-center mb-4">
          <label htmlFor="primaryServer">Primary DNS Server</label>
          <Field
            name="primaryServer"
            type="text"
            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
            placeholder="Enter primary DNS server"
            autoComplete="off"
          />
        </div>
        <div className="flex flex-row justify-between items-center mb-4">
          <label htmlFor="secondaryServer">Secondary DNS Server</label>
          <Field
            name="secondaryServer"
            type="text"
            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
            placeholder="Enter secondary DNS server"
            autoComplete="off"
          />
        </div>
        <button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
          Save Settings
        </button>
      </Form>
    </Formik>
  );
};

export default SystemConfig;