import React from "react";
import Icon from "@/components/icon";
import { useTheme } from "next-themes";
import colors from "@/utils/colors";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { signInValidationSchema } from "@/utils/form";

function ModalSignIn() {
  const { theme } = useTheme();
  const color = colors[theme ?? "light"]["base-content"];
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(signInValidationSchema),
  });
  return (
    <>
      <input type="checkbox" id="sign-in-modal" className="modal-toggle" />
      <label htmlFor="sign-in-modal" className="modal cursor-pointer">
        <label className="modal-box relative bg-base-100  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
          <div className="flex justify-end pb-2 select-none">
            <label htmlFor="sign-in-modal" className="cursor-pointer">
              <Icon name="Dismiss20Filled" size="medium" color={color} />
            </label>
          </div>
          <div>
            <div
              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg"
              data-aos="fade-up"
            >
              <h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
                Welcome back!
              </h3>
              <p className="text-sm md:text-base">Lets kick some more ass?</p>
            </div>
            {/* <ModalSignInForm
              textOnUse={"textOnUse"}
              setStatus={setStatus}
              ref={formRef}
            /> */}
            <form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
              <div className="relative mt-6">
                <input
                  {...register("email")}
                  id="SignInEmail"
                  type="text"
                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                  placeholder="Your email…"
                  aria-label="Your email…"
                  autoComplete="on"
                />
                <div className="text-start text-sm italic text-error-content">
                  {errors.email?.message}&nbsp;
                </div>
              </div>
              <div className="relative mt-1 mb-2">
                <input
                  {...register("password")}
                  id="SignInPwd"
                  type="password"
                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
                  placeholder="Your password..."
                  aria-label="Your password..."
                />
                <div className="text-start text-sm italic text-error-content">
                  {errors.password?.message}&nbsp;
                </div>
              </div>

              <button type="submit" className="btn btn-primary">
                Sign In
              </button>
            </form>
          </div>
        </label>
      </label>
    </>
  );
}

export default ModalSignIn;