import { Field, Form, Formik } from "formik";
import FormGroup from "../components/FormGroup";
import type { WifiSettingValues } from "../../../types/types";
import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
import { toast } from "sonner";

const WiFiSettingsForm = () => {
  const { wifiQuery, wifiMutation } = useWifiAndModem();

  const wifiSSID = wifiQuery?.data?.propSSID?.value;
  const wifiPassword = wifiQuery?.data?.propPassword?.value;

  const initialValues = {
    ssid: wifiSSID ?? "",
    password: wifiPassword ?? "",
    encryption: "WPA2",
  };

  const handleSubmit = (values: WifiSettingValues) => {
    const wifiConfig = {
      id: "ModemAndWifiManager-wifi",
      fields: [
        {
          property: "propSSID",
          value: values.ssid,
        },
        {
          property: "propPassword",
          value: values.password,
        },
      ],
    };

    wifiMutation.mutate(wifiConfig);
    //todo: check what response is
    if (wifiMutation.error) {
      toast.error("Failed to update WiFi settings");
      return;
    }
    toast.success("WiFi settings updated");
  };
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      enableReinitialize
    >
      {() => (
        <Form className="flex flex-col space-y-5 px-2">
          <FormGroup>
            <label
              htmlFor="ssid"
              className="font-medium whitespace-nowrap md:w-2/3"
            >
              SSID
            </label>
            <Field
              id="ssid"
              name="ssid"
              type="text"
              className="p-1.5 border border-gray-400 rounded-lg"
              placeholder="Enter SSID"
            />
          </FormGroup>
          <FormGroup>
            <label
              htmlFor="password"
              className="font-medium whitespace-nowrap md:w-2/3"
            >
              Password
            </label>
            <Field
              id="password"
              name="password"
              type="password"
              className="p-1.5 border border-gray-400 rounded-lg"
              placeholder="Enter Password"
            />
          </FormGroup>
          <FormGroup>
            <label
              htmlFor="encryption"
              className="font-medium whitespace-nowrap md:w-2/3"
            >
              WPA/Encryption Type
            </label>
            <Field
              id="encryption"
              name="encryption"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
              as="select"
            >
              <option value="WPA2">WPA2</option>
              <option value="WPA3">WPA3</option>
              <option value="WEP">WEP</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%]"
          >
            Save WiFi settings
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default WiFiSettingsForm;