import { useRouter } from "next/router";
import { useState, FormEventHandler } from "react";
import "react-toastify/dist/ReactToastify.css";
import { NextPage } from "next";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import { passwordRules } from "@/utils/regex/regex";
import logo from "../assets/images/logos/logo.png";
import Image from "next/image";
import bg2 from "../assets/images/logos/bg2.png";
import hidepassword from "../assets/images/logos/hidepassword .png";
import showpasswords from "../assets/images/logos/showpass.png";
const SignUp: NextPage = (): JSX.Element => {
  const [showPassword, setShowPassword] = useState(false);
  const router = useRouter();

  const validationSchema = Yup.object().shape({
    username: Yup.string().required("Required"),
    email: Yup.string()
      .required("Required")
      .email("Please Enter a Valid Email Address."),
    password: Yup.string().required("Required").matches(passwordRules, {
      message:
        "Password should contains atleast 8 charaters and containing uppercase,lowercase and numbers",
    }),
  });
  const formOptions = { resolver: yupResolver(validationSchema) };
  // get functions to build form with useForm() hook
  const { register, handleSubmit, formState } = useForm(formOptions);
  const { errors } = formState;
  const onSubmit: FormEventHandler<HTMLFormElement> | any = async (
    data: any,
    e: any,
  ) => {
    // Server-side validation
    e.preventDefault();
  };
  return (
    <section className="">
      <div>
        <div className="row d-flex justify-content-center align-items-center">
          <div className="">
            <div
              className="text-black"
              style={{
                backgroundImage: `url(${bg2.src})`,
                height: "100vh",
                backgroundSize: "cover",
                backgroundPosition: "center",
              }}
            >
              <div className="row">
                <div className={`col-lg-6`}>
                  <div className="card-body p-md-5 mx-md-4">
                    <div className="text-center">
                      <Image src={logo} alt="logo" />
                      <h4 className={`mt-1 mb-5 pb-1`}>
                        Freight Manager Register
                      </h4>
                    </div>
                    <form onSubmit={handleSubmit(onSubmit)}>
                      <div className="form-outline mb-4">
                        <input
                          {...register("username")}
                          className={`form-control ${errors.username ? "is-invalid" : ""}`}
                          id="username"
                          placeholder="Enter username"
                          name="username"
                        />
                        <div
                          className="invalid-feedback"
                          style={
                            errors.username
                              ? { display: "block" }
                              : { display: "none" }
                          }
                        >
                          {errors.username?.message?.toString()}
                        </div>
                      </div>
                      <div className="form-outline mb-4">
                        <input
                          {...register("email")}
                          className={`form-control ${errors.email ? "is-invalid" : ""}`}
                          id="email"
                          placeholder="Enter email"
                          name="email"
                        />
                        <div
                          className="invalid-feedback"
                          style={
                            errors.email
                              ? { display: "block" }
                              : { display: "none" }
                          }
                        >
                          {errors.email?.message?.toString()}
                        </div>
                      </div>
                      <div className="form-outline mb-4">
                        <div>
                          <input
                            type={showPassword ? "text" : "password"}
                            {...register("password")}
                            className={` form-control ${errors.password}`}
                            id="pwd"
                            placeholder="Enter password"
                            name="password"
                          />
                          <Image
                            className="cursor-pointer show-hide-icon"
                            onClick={() => setShowPassword(!showPassword)}
                            alt="image"
                            src={
                              showPassword
                                ? hidepassword
                                : (showpasswords as any)
                            }
                          />
                        </div>
                        <div
                          className="invalid-feedback"
                          style={
                            errors.password
                              ? { display: "block" }
                              : { display: "none" }
                          }
                        >
                          {errors.password?.message?.toString()}
                        </div>
                        <div className="form-check d-flex  mb-4 mt-3">
                          <input
                            className="form-check-input me-2 "
                            type="checkbox"
                            value=""
                            id="form2Example33"
                          />
                          <div
                            style={{
                              display: "flex",
                              justifyContent: " space-between",
                              width: "100%",
                            }}
                          >
                            <label
                              className="form-check-label me-2"
                              htmlFor="form2Example33"
                            >
                              Allow terms and condition
                            </label>
                          </div>
                        </div>
                      </div>
                      <div className="text-center pt-1 mb-5 pb-1">
                        <button
                          className="btn btn-primary btn-block  text-center"
                          type="submit"
                        >
                          Register
                        </button>
                      </div>
                      <div className="d-flex align-items-center justify-content-center pb-4">
                        <p>
                          Already have an account -{" "}
                          <a
                            onClick={() => router.push("/login")}
                            className="cursor-pointer"
                          >
                            Login
                          </a>
                        </p>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
export default SignUp;