import { useState } from "react";
import { Button, FloatLabelInput } from "..";
import CustomModal from "../modal/CustomModal";
import { useNavigate } from "react-router-dom";
import { RouteHandler } from "../../router/routes";


type FormType = {
  email: string;
  password: string;
};

type HandleChange = {
  name: string;
  value: string;
};

export default function Login() {
    const navigate = useNavigate()

  let [formDetails, setFormDetails] = useState<FormType>({
    email: "",
    password: "",
  });

  const handleFormChange = ({
    target: { name, value },
  }: {
    target: HandleChange;
  }): any => {
    setFormDetails((prev) => ({ ...prev, [name]: value }));
  };

  const [modal, setModal] = useState<boolean>(false)

  return (
    <>
      <div className={`w-full overflow-y-auto bg-top bg-cover`}>
        <div className="w-full flex justify-center">
          <div className="w-2/3 md:max-w-[570px]">
            <div className="bg-white w-full rounded-2xl border-2 border-black">
              <div className="w-full p-5 sm:p-10 lg:p-20 flex flex-col justify-between items-center h-full">
                <div className="mb-4">
                  <h1 className="text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black">
                    Welcome!
                  </h1>
                  <p className="text-xl mt-4 text-center font-medium text-black dark:text-black">
                    Please login with your email and default password provided to you
                  </p>
                </div>

                <div className="w-full">
                  {/* INPUTS */}
                  <div className="w-full">
                    <div className="relative my-2 py-2">
                      <FloatLabelInput
                        id="email"
                        name="email"
                        type="email"
                        placeHolder="Email"
                        labelName="Email"
                        value={formDetails.email}
                        inputClass=""
                        onChange={handleFormChange}
                      />
                    </div>
                    <div className="relative my-2 py-2">
                      <FloatLabelInput
                        id="password"
                        name="password"
                        type="password"
                        placeHolder="Password"
                        labelName="Password"
                        value={formDetails.password}
                        inputClass=""
                        onChange={handleFormChange}
                      />
                    </div>
                  </div>

                  <div className="mt-10 w-full sm:flex justify-between items-center gap-2">
                    <Button
                      text="Enter"
                      className="rounded-md w-full sm:w-2/5 text-xl capitalize font-bold"
                      onClick={()=>{setModal(true)}}
                    />
                    {/* <Link to='' className='text-black text-sm'>Forget your password?</Link> */}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      { modal &&
        <CustomModal>
          <div className="py-5 bg-white w-[90%] max-w-[420px] flex flex-col justify-center items-center rounded-xl">
            <p className="px-10 md:px-20 text-sm font-bold text-slate-700 text-center tracking-wide leading-normal">We have sent you a verification code to complete this Login. Please check your phone number</p>
            <div className="px-5 md:px-10 w-full flex justify-end">
              <button
                className="font-bold text-[11px] lg:text-[13px] text-[#5A2C82]"
                onClick={()=>{navigate(RouteHandler.otppage, { state: {continue: true }, replace:true })}}
              >
                Ok
              </button>
            </div>
          </div>
        </CustomModal>
      }
    </>
  );
}