import React, { useEffect, useState } from "react";
import { Form, Field, useFormikContext } from "formik";
import Image from "../../Components/Ui/Image";
import { Input } from "antd";
import AuthSelect from "../../Components/Ui/Custom/AuthSelect";
import { useGetAllCycle } from "../../api/cycle";
import { useGetAllBranch } from "../../api/branch";
import { useGetAllTerm } from "../../api/term";
import { FormValues } from "../../types/Auth";
import {
  BRANCH_OBJECT_KEY,
  CYCLE_OBJECT_KEY,
  TERM_OBJECT_KEY,
} from "../../config/AppKey";
import useFormatAuthDataToSelect from "../../utils/useFormatAuthDataToSelect";
import { useTranslation } from "react-i18next";

type FormFieldType = {
  isLoading: boolean;
};

const FormField = ({ isLoading }: FormFieldType) => {

  const [t] = useTranslation();
  return (
    <Form className="AuthForm">
      <Image src="../App/Logo.png" />
   

      <div className="AuthInput">
        <label className="form-label" htmlFor="username">
          {t("input.Username")}
        </label>
        <Field
          placeholder={t("input.Username")}
          as={Input}
          type="text"
          id="username"
          name="username"
          className="Input"
          size="large"
        />
      </div>

      <div className="AuthInput">
        <label className="form-label" htmlFor="password">
          {t("input.Password")}
        </label>
        <Field
          placeholder={t("input.Password")}
          as={Input.Password}
          type="password"
          id="password"
          name="password"
          className="passwordInput"
          size="large"
        />
      </div>

      <button
        disabled={isLoading}
        type="submit"
        className="btn SubmitButton  btn-lg btn-block w-100"
      >
        {t("practical.login")}
      </button>
    </Form>
  );
};

export default FormField;