import React, { useState } from "react";
import Orange_Btn from "../../common_btn/orange_btn/Orange_Btn";
import { Form, Modal } from "react-bootstrap";
import { useForm } from "react-hook-form";
import "./Login_Modal.css";
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
import PasswordChecklist from "react-password-checklist";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Reset_Password_Modal from "../reset_password_modal/Reset_Password_Modal";
import { useDispatch } from "react-redux";
import { userSignUp } from "../../../../features/auth/authSlice";
import { RegxExpression } from "../../../../utils/common";
import Green_btn from "../../common_btn/green_btn/Green_btn";
import Black_Btn from "../../common_btn/black_btn/Black_Btn";

const SignUp_Modal = ({
  onHide,
  setShowAccountCreted,
  showSignUp,
  setShowSignUp,
}) => {
  // const [showSignUp, setShowSignUp] = useState(false);

  const [password, setPassword] = useState("");
  const [passwordAgain, setPasswordAgain] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [showPasswordOne, setShowPasswordOne] = useState(false);
  const [iconOne, setIconOne] = useState(faEyeSlash);
  const [iconTwo, setIconTwo] = useState(faEyeSlash);

  const togglePasswordVisibility = (field) => {
    if (field === "password") {
      setShowPassword(!showPassword);
      setIconOne(showPassword ? faEyeSlash : faEye);
    } else if (field === "reenterPassword") {
      setShowPasswordOne(!showPasswordOne);
      setIconTwo(showPasswordOne ? faEyeSlash : faEye);
    }
  };

  const {
    control,
    register,
    handleSubmit,
    getValues,
    setValue,
    setError,
    clearErrors,
    formState: { errors },
    reset,
    trigger,
  } = useForm();

  const dispatch = useDispatch();
  const onSubmit = async (data) => {
    const res = await dispatch(userSignUp(data));

    if (res.meta?.requestStatus === "fulfilled") {
      onHide();
      setShowAccountCreted();
      // //   setShowAccountCreted(true);
      // setTimeout(() => {
      //   // navigate("/home");
      // }, 3000);
    } else if (res.meta?.requestStatus === "rejected") {
      if (res.payload?.errors?.email) {
        setError("email", {
          type: "manual",
          message: res.payload?.errors?.email,
        });
      }
      if (res.payload?.errors?.contact_no) {
        setError("contact_no", {
          type: "manual",
          message: res.payload?.errors?.contact_no,
        });
      }
    }
  };

  return (
    <div className="signup_div">
      <div className="login_form_div">
        <Form>
          <Form.Group className="gray_input_group input_group">
            <Form.Group className="gray_input_group input_group">
              <Form.Label>Full Name</Form.Label>
              <Form.Control
                type="text"
                placeholder="Enter Full name"
                {...register("name", {
                  required: "Name is required",
                })}
              />
              {errors?.name && (
                <sup className="text-danger">{errors?.name?.message}</sup>
              )}
            </Form.Group>
            <Form.Label>Email </Form.Label>
            <Form.Control
              type="text"
              name="email"
              placeholder="Email"
              {...register("email", {
                required: "Email is required",
                pattern: {
                  value: RegxExpression.email,
                  message: "Invalid email ",
                },
              })}
            />
            {errors?.email && (
              <sup className="text-danger">{errors?.email?.message}</sup>
            )}
          </Form.Group>

          <Form.Group className="gray_input_group input_group">
            <Form.Label>Mobile Number</Form.Label>
            <Form.Control
              type="text"
              placeholder="Enter mobile number"
              maxLength={10}
              onKeyPress={(e) => {
                if (!/[0-9]/.test(e.key)) {
                  e.preventDefault(); // Block non-numeric input
                }
              }}
              {...register("contact_no", {
                required: "Mobile Number is required",
                minLength: {
                  value: 10,
                  message: "Mobile number must be 10 digits",
                },
                maxLength: {
                  value: 10,
                  message: "Mobile number must be 10 digits",
                },
                pattern: {
                  value: /^[0-9]{10}$/,
                  message: "Mobile number must be 10 digits",
                },
              })}
            />
            {errors?.contact_no && (
              <sup className="text-danger">{errors?.contact_no?.message}</sup>
            )}
          </Form.Group>



          <Form.Group className="gray_input_group input_group">
            <Form.Label className="label_text"> Password</Form.Label>
            <div className="password_holder">
              <Form.Control
                type={showPassword ? "text" : "password"}
                name="password"
                {...register("password", {
                  required: "Password is required",
                  minLength: {
                    value: 8,
                    message: "Password must be at least 8 characters long",
                  },
                  pattern: {
                    value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/,
                    message:
                      "Password must contain at least one uppercase letter, one lowercase letter, and one number",
                  },
                })}
                onChange={(e) => setPassword(e.target.value)}
              />
              {errors?.password && (
                <sup className="text-danger">{errors?.password?.message}</sup>
              )}
              <div className="eye-icc">
                <FontAwesomeIcon
                  icon={iconOne}
                  className="icon"
                  onClick={() => togglePasswordVisibility("password")}
                />
              </div>
            </div>
          </Form.Group>

          <Form.Group className="gray_input_group input_group">
            <Form.Label className="label_text"> Confirm Password</Form.Label>
            <div className="password_holder">
              <Form.Control
                type={showPasswordOne ? "text" : "password"}
                name="re_password"
                // {...register("re_password", {
                //   required: "Re-Enter Password  is required",
                // })}
                {...register("re_password", {
                    required: "Re-Enter Password is required",
                    validate: (value) =>
                      value === getValues("password") ||
                      "Passwords do not match",
                  })}
                onChange={(e) => setPasswordAgain(e.target.value)}
              />

              <div className="eye-icc">
                <FontAwesomeIcon
                  icon={iconTwo}
                  className="icon"
                  onClick={() => togglePasswordVisibility("reenterPassword")}
                />
              </div>
              {errors?.re_password && (
                <sup className="text-danger">
                  {errors?.re_password?.message}
                </sup>
              )}
            </div>
          </Form.Group>

          {password && (
            <div className="password_check_list">
              <PasswordChecklist
                rules={[
                  "minLength",
                  "specialChar",
                  "number",
                  "capital",
                  "match",
                ]}
                minLength={8}
                value={password}
                valueAgain={passwordAgain}
                onChange={(isValid) => { }}
                style={{
                  fontSize: "10px",
                  padding: "4px",
                  margin: "0",
                }}
              />
            </div>
          )}
        </Form>
      </div>

      <div className="btn_holder">
        <Black_Btn
          btnText="Sign Up"
          onClick={handleSubmit(onSubmit)}
        // type="submit"
        // onClick={() => {
        //     props?.onHide()
        //     props?.setShowAccountCreted()
        //  }}
        />
      </div>

      <p className="dark_text">
        Already have an account?{" "}
        <span
          className="link_text"
          onClick={() => {
            setShowSignUp(false);
          }}
        >
          Log In
        </span>
        .
      </p>

      {/* <div className="or_text_div">
        <p className="or_txt">Or</p>
      </div>

      <div className="google_img_holder">
        <div className="img_holder">
          <img src="/assets/images/modal/google.png" className="g_img" />
        </div>
        <p className="signu_with_g_txt">Sign Up with Google</p>
      </div> */}
    </div>
  );
};

export default SignUp_Modal;
