"use client";
import React, { useState } from "react";

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

import logo from "@/public/assets/images/logo-black.png";
import Image from "next/image";

import { Formik, useFormik } from "formik";
import * as Yup from "yup";
import { loginSchema } from "@/lib/loginSchema";
import ButtonLoading from "@/components/application/ButtonLoading";

// Eye icons.
import { FaRegEyeSlash } from "react-icons/fa";
import { FaRegEye } from "react-icons/fa6";
import Link from "next/link";
import { WEBSITE_REGISTER } from "@/routes/AdminPanelRoute";


const Loginpage = () => {
  const [loading, setLoading] = useState(false);
  const [isTypePassword, setisTypePassword] = useState(true);

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: loginSchema.pick(["email", "password"]), // specific field import fron custom yup schema
    onSubmit: async (values) => {
      console.log(values);

      // try {
      //   let axiosConfig = {
      //     headers: {
      //       "Content-Type": "application/json;charset=UTF-8",
      //       //"Access-Control-Allow-Origin": "*",
      //     },
      //     credentials: "include",
      //   };

      //   await axios
      //     .post(`${import.meta.env.VITE_API_BASE_URL}/login`, values, axiosConfig)
      //     .then(async (res) => {
      //       const data = await res.data;

      //       if (data.success === "false") {
      //         showToast("error", data.msg);
      //       } else if (data.user[0].active == 0) {
      //         showToast("error", "Not an Active Plant Manager");
      //       } else {
      //         console.log(data);

      //         showToast("success", data.msg);
      //         dispatch(setUser(data.user));

      //         naviGate(RouteIndex);
      //       }
      //     })
      //     .catch((err) => {
      //       //console.log("Error Occurred", err);
      //       if (err.response.status == 401) {
      //         showToast("error", err.response.data.msg);
      //         //console.log(err.response.data.msg)
      //       }
      //     });
      // } catch (error) {
      //   //console.log(error);
      //   //showToast("error", error.response.status);
      //   showToast("error", "Unable to Signed In");
      // }
    },
  });

  return (
    <Card className="w-[550px]">
      <CardContent>
        <div className="flex justify-center">
          <Image
            src={logo.src}
            width={logo.width}
            height={logo.height}
            className="max-w-[150px]"
            alt=""
          />
        </div>
        <div>
          <h1 className="text-xl text-center font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
            Login into Your Account
          </h1>

          <form onSubmit={formik.handleSubmit} className="space-y-4">
            <div>
              <label className="block font-medium">Email</label>
              <Input
                name="email"
                onChange={formik.handleChange}
                type="email"
                onBlur={formik.handleBlur}
                value={formik.values.managername}
                className="mt-1 block w-full border rounded-md px-3 py-2 focus:outline-none focus:ring focus:ring-blue-300"
              />
              {formik.touched.email && formik.errors.email && (
                <div className="text-red-500 text-sm mt-1">
                  {formik.errors.email}
                </div>
              )}
            </div>

            <div>
              <label className="block font-medium">Password </label>
              <Input
                name="password"
                type={isTypePassword ? "password" : "text"}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.password}
                className="relative mt-1 block w-full border rounded-md px-3 py-2 focus:outline-none focus:ring focus:ring-blue-300"
              />
              <span className="absolute top-7/13 md:block right-3/8">
                <button
                  className="cursor-pointer"
                  type="button"
                  onClick={() => setisTypePassword(!isTypePassword)}
                >
                  {isTypePassword ? <FaRegEyeSlash /> : <FaRegEye />}
                </button>
              </span>
              {formik.touched.password && formik.errors.password && (
                <div className="text-red-500 text-sm mt-1">
                  {formik.errors.password}
                </div>
              )}
            </div>

            {/* <Button type="submit" className="w-full bg-green-600 mt-2">
              Submit
            </Button> */}
            <ButtonLoading
              type="submit"
              loading={loading}
              text="Login"
              className="w-full bg-green-600 mt-2"
            />
            <div className="text-center">
              <div className="flex justify-center items-center gap-3">
                <p>Don't have an account?</p>
                <Link href={WEBSITE_REGISTER} className="hover:text-blue-800">Create an Account</Link>
                
              </div>

              <div>
               <Link href={""} className="hover: underline text-red-800 ">Forgot Password</Link>
               
              </div>
            </div>
          </form>
        </div>
      </CardContent>
    </Card>
  );
};

export default Loginpage;