import React, { useState } from "react";
import Orange_Btn from "../../common_btn/orange_btn/Orange_Btn";
import { Col, Form, Modal, Row } 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,
  setAuthMode,
}) => {
  // 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.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>
          <Row>
            <Col md={6}>
              <Form.Group className="gray_input_group input_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>
            </Col>
            <Col md={6}>
              <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>
            </Col>
          </Row>
          <Row>
            <Col md={6}>
              <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>
            </Col>
            <Col md={6}>
              <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>
            </Col>
          </Row>
          {/* {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);
          // }}
          onClick={() => setAuthMode("login")}
        >
          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;
