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

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

  const initialValues = {
    username: "",
    password: "",
    clientId: "",
  };

  const handleSubmit = (values: NPEDFieldType) => {
    console.log(isError);
    signIn(values);
  };

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      <Form className="flex flex-col space-y-2">
        <FormGroup>
          <label htmlFor="username">Username</label>
          <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>
          <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>
          <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;