import { Formik, Form, Field, ErrorMessage } from "formik";
import { useState } from "react";
import * as Yup from "yup";
import Footer from "../../src/components/Footer/footer";
import Navbar from "../../src/components/navbar/navbar";
import { useAuth } from "../../src/context/Auth";
import LoginInformation from "../../src/components/information/login-information";

const LoginSchema = Yup.object().shape({
  email: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Required"),
  password: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Required"),
});

function Login() {
  const { login, setLoader } = useAuth();

  return (
    <>
      <Navbar />
      <LoginInformation />
      <Formik
        initialValues={{ email: "", password: "" }}
        validationSchema={LoginSchema}
        onSubmit={(values, { setSubmitting }) => {
          setLoader(true);
          login(values.email, values.password);
          setSubmitting(false);
        }}
      >
        {({ isSubmitting }) => (
          <div className="flex flex-col my-6/12 justify-center items-center max-h-96 h-screen">
            <div
              className="block p-10 border border-gray-200 rounded-lg shadow-md lg:w-8/12 w-11/12 "
              style={{ backgroundColor: "#f9f9f9" }}
            >
              <Form className="space-y-4 lg:space-y-6 ">
                <div>
                  <label
                    htmlFor="email"
                    className="block mb-2 text-lg font-bold text-gray-900"
                  >
                    Email
                  </label>
                  <Field
                    type="text"
                    name="email"
                    id="email"
                    className=" border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5    "
                    placeholder="Enter Your email address"
                  />
                  <ErrorMessage
                    name="email"
                    component="div"
                    className="text-red-600 text-sm font-medium"
                  />
                </div>
                <div>
                  <label className="block mb-2 text-lg font-bold text-gray-900">
                    Password
                  </label>
                  <Field
                    name="password"
                    id="password"
                    type="password"
                    className=" border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5    "
                    placeholder="Enter Your password"
                  />
                  <ErrorMessage
                    name="password"
                    component="div"
                    className="text-red-600 text-sm font-medium"
                  />
                </div>
                <button
                  type="submit"
                  disabled={isSubmitting}
                  style={{
                    backgroundColor: "#0f172a",
                  }}
                  className="text-white w-full   focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-5 py-2.5 mr-2 mb-2   focus:outline-none"
                >
                  Login
                </button>
              </Form>
            </div>
          </div>
        )}
      </Formik>
      <Footer />
    </>
  );
}

export default Login;