import { Form, Formik, Field } from "formik";
import FormGroup from "../components/FormGroup";
import type { NPEDErrorValues, NPEDFieldType } from "../../../types/types";
import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
import { toast } from "sonner";

const NPEDFields = () => {
  const { signIn } = useNPEDAuth();

  const initialValues = {
    username: "",
    password: "",
    clientId: "",
    frontId: "NPEDFront",
    rearId: "NPEDRear",
  };

  const handleSubmit = (values: NPEDFieldType) => {
    const valuesToSend = {
      ...values,
    };
    signIn(valuesToSend);
    toast("Signed in successfully");
  };

  const validateValues = (values: NPEDFieldType) => {
    const errors: NPEDErrorValues = {};
    if (!values.username) errors.username = "Required";
    if (!values.password) errors.password = "Required";
    if (!values.clientId) errors.clientId = "Required";
    return errors;
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validate={validateValues}
    >
      {({ errors, touched }) => (
        <Form className="flex flex-col space-y-5">
          <FormGroup>
            <label htmlFor="username">Username</label>
            {touched.username && errors.username && (
              <small className="absolute right-0 -top-5 text-red-500">
                {errors.username}
              </small>
            )}
            <Field
              name="username"
              type="text"
              id="username"
              placeholder="NPED username"
              className="p-1.5 border border-gray-400 rounded-lg"
            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="password">Password</label>
            {touched.password && errors.password && (
              <small className="absolute right-0 -top-5 text-red-500">
                {errors.password}
              </small>
            )}
            <Field
              name="password"
              type="password"
              id="password"
              placeholder="NPED Password"
              className="p-1.5 border border-gray-400 rounded-lg"
            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="clientId">Client ID</label>
            {touched.clientId && errors.clientId && (
              <small className="absolute right-0 -top-5 text-red-500">
                {errors.clientId}
              </small>
            )}
            <Field
              name="clientId"
              type="text"
              id="clientId"
              placeholder="NPED client ID"
              className="p-1.5 border border-gray-400 rounded-lg"
            />
          </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"
          >
            Login
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default NPEDFields;