/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import {
  Button,
  Form,
  Input,
  message,
  Modal,
  notification,
  Radio,
  Select,
  Space,
  Spin,
} from "antd";
import Geocode from "react-geocode";
import { FC, useEffect, useRef, useState } from "react";
import { CheckCircleFilled } from "@ant-design/icons";
import styles from "./otpModal.module.scss";
import cx from "classnames";
import OtpInput from "react-otp-input";
import SignUpModal from "../latestSignUpModal/SignUpModal";
import * as LoginAPI from "../../../pages/api/login";
import Router, { useRouter } from "next/router";
const { Option } = Select;
import { MailOutlined, EditFilled, SyncOutlined } from "@ant-design/icons";
import SingInModal from "../singInModel/SingInModal";
import * as UserAPI from "../../../pages/api/createUser";
import SuccessModal from "../successModal/SuccessModal";
import { APIKEY, baseUrl } from "../../../constants/urls";
import { googleClientId } from "../../../constants/socialLogin";
import * as commonAPI from "../../../pages/api/common";
import { GoogleLogin, GoogleLogout } from "react-google-login";
import { useMediaQuery } from "react-responsive";
import ResetPassword from "../resetPassword/ResetPassword";
import Register from "../../../mockData/register";
import ReCAPTCHA from "react-google-recaptcha";
import { emailRegx, passwordMsg } from "../../../constants/errorMessages";
import social from "../../../mockData/socialData";
import { capitalizeWords } from "../../../constants/commonFunction";
import gstTypes from "../../../mockData/gstTypes";
import { DatasetController } from "chart.js";

const md5 = require("md5");
const OTPModal: FC<any> = (props) => {

  const isMobile = useMediaQuery({ maxWidth: 767.68 });
  const [form] = Form.useForm();
  const { isOTPModalVisible, handleOTPClose } = props;
  const [modeData, setMode] = useState("sms");
  const [phoneNo, setPhone] = useState("");
  const [emailOtp, setEmailOtp] = useState("");
  const [loginEmail, setLoginEmail] = useState("");
  const [otp, setOtp] = useState("");
  const [password, setPassword] = useState("");
  const [submitFormStatus, setSubmitStatus] = useState(false);
  const [isSignupModal, setIsSignupModal] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isSubmitEmail, setIsSubmitEmail] = useState(false);
  const [loading, setLoading] = useState(false);
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [selectUser, setSelectUser] = useState<any>(1);
  const [pincode, setPincode] = useState("");
  const [companyName, setCompanyName] = useState("");
  const [gst, setGst] = useState("");
  const [pan, setPan] = useState("");
  const [alternativeNumber, setAlternativeNumber] = useState("");
  const [businessNumber, setBusinessNumber] = useState("");
  const [businessEmail, setBusinesEmail] = useState("");
  const [whatsappNumber, setWhatsappNumber] = useState("");
  const [companyUrl, setCompanyUrl] = useState("");
  const [selectGender, setSelectGender] = useState("");
  const [isSignUP, setIsSignUp] = useState(false);
  const [isSuccessModal, setIsSuccessModal] = useState(false);
  const [whatsOTPAppNumber, setWhatsOTPAppNumber] = useState("");
  const [otpRes, setOtpRes] = useState<any>({});
  const [taxRes, setTaxRes] = useState<any>({});
  const [isDisable, setIsDisable] = useState(false);
  const [isPasswordReset, setIsPasswordReset] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const captchaRef = useRef<any>("");
  const [verified, setVerified] = useState(false);
  const [isTaxVerify, setIsTaxVerify] = useState(false);
  const [gstSelect, setGstSelect] = useState("");
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  const [isOtpSent, setIsOtpSent] = useState(false);
  const [mobileOtpRes, setMobileOtpRes] = useState<any>({});
  const [varifyOtp, setVarifyOtp] = useState("");
  const [isOtpVarified, setIsOtpVarified] = useState(false);
  const [aboutUs, setAboutus] = useState("");
  const [isEditable, setIsEditable] = useState(false);
  const [emailNotVerified, setEmailNotVerified] = useState(false);
  const [isOtpSent1, setIsOtpSent1] = useState(false);
  const [mobileOtpRes1, setMobileOtpRes1] = useState<any>({});
  const [varifyOtp1, setVarifyOtp1] = useState("");
  const [isOtpVarified1, setIsOtpVarified1] = useState(false);
  const [isEmailDisable, setIsEmailDisable] = useState(false);
  const [GSTTreatment, setGSTTreatment] = useState("");
  const [legalName, setLegalName] = useState("");
  const [GSTTreatmentDisable, setGSTTreatmentDisable] = useState(false);
  // const [stateArray,setStateArray] = useState([]);
  const router = useRouter();
  
  const handleModeChange = (e: any) => {
    setMode(e.target.value);
    setEmailOtp("");
    setWhatsOTPAppNumber("");
    setPhone("");
  };

  /* form validation */
  const onFinishFailed = (errorInfo: any) => {
    // console.log("Failed:", errorInfo);
  };

  /* sign up function */
  const onFinish = () => {
    if (gstSelect == "Yes" && !isTaxVerify) {
      notification.error({ message: "Please Verify GST Number" });
    } else
      if (password !== confirmPassword) {
        notification.error({ message: "Passwords don't match" });
      } else if (!isOtpVarified) {
        notification.error({ message: "Mobile number not verify , please verify your Mobile number" });
      }else if(!isOtpVarified1){
        notification.error({ message: "Email not verify , please verify your Email" });
      } else {
        setIsLoading(true);
        const params = {
          first_name: firstName,
          last_name: lastName,
          email: emailOtp,
          password: password,
          phone: phoneNo,
          password_confirmation: confirmPassword,
          bussiness_type: selectUser,
          state_code: pincode,
          company_name: companyName,
          company_gst: gst,
          company_pan: pan,
          alternative_number: alternativeNumber,
          business_number: businessNumber,
          business_email: businessEmail,
          whatsapp_number: whatsappNumber,
          company_url: companyUrl,
          gender: selectGender,
          heard_about_us: aboutUs,
          gst_treatment: GSTTreatment,
          legal_name: legalName,
          billingAddress: gst == "" ? {} : {
            address1: taxRes?.data?.pradr?.addr?.bno + "," + taxRes?.data?.pradr?.addr?.loc,
            address2: taxRes?.data?.pradr?.addr?.bnm + "," + taxRes?.data?.pradr?.addr?.st,
            city: taxRes?.data?.pradr?.addr?.dst,
            country: "IN",
            country_name: "India",
            phone: phoneNo,
            landmark: taxRes?.data?.pradr?.addr?.flno,
            postcode: taxRes?.data?.pradr?.addr?.pncd,
            state: taxRes?.data?.pradr?.addr?.stcd,
            firstname: firstName,
            lastname: lastName,
            longitude: longitude,
            latitude: latitude,
          }
        };




        UserAPI.createUserFetch(params).then((res: any) => {
          setIsLoading(false);
          if (res?.status) {
            // setIsSignUp(false);
            const key = Object.keys(res.data)[0];
            notification.error({ message: res.data[key] });
          } else {
            setEmptyData();
            setIsSignUp(false);
            setSubmitStatus(false);
            handleOTPClose();
            localStorage.setItem("loginDetails", JSON.stringify(res));
            setIsSuccessModal(true);
          }
        });
      }
  };

  /* phone otp api function */
  const onPhoneSubmit = (values: any) => {
    setSubmitStatus(true);
    setIsDisable(true);
    const params = {
      finalValue: values.phone,
    };
    LoginAPI.OtpVarify(params).then((res) => {
      setIsDisable(false);
      setOtpRes(res);
    });
  };

  /* resend otp email or phone api function */
  const resend = () => {
    setLoading(true);
    if (phoneNo !== "") {
      const params = {
        finalValue: phoneNo,
      };
      LoginAPI.OtpVarify(params).then((res) => {
        setOtpRes(res);
        setLoading(false);
      });
    } else {
      const params = {
        email: emailOtp,
      };
      LoginAPI.EmailSentOTP(params).then((res) => {
        setOtpRes(res);
        setLoading(false);
      });
    }
  };

  /* login email exits or not checking api function */
  const passWordMailSubmit = () => {
    // setIsSubmitEmail(true);
    
    commonAPI
      .getRequest(`${baseUrl}/api/customer/check-mail?email=${emailOtp}`)
      .then((res: any) => {
        if (res?.data?.status === false) {
          setIsModalVisible(false);
          if (props?.page === "checkOut") {
            localStorage.setItem("Email", emailOtp);
            // console.log(emailOtp, "emailOtp")
            router.push(
              {
                pathname: `/signIn`,
                query: { email: emailOtp },
              },
              "/signIn"
            );
          } else {
            setEmailNotVerified(true);
            form.setFieldsValue({
              emailOtp: emailOtp,
            });

            setEmailOtp(emailOtp);
            setIsSignUp(true);
            setSubmitStatus(true);
          }
        } else {
          setIsSubmitEmail(true);
        }
      });
  };

  /* email otp api function*/
  const onEmailSubmit = (values: any) => {
    setSubmitStatus(true);
    setIsDisable(true);
    const params = {
      email: emailOtp,
    };
    LoginAPI.EmailSentOTP(params).then((res) => {
      setOtpRes(res);
      setIsDisable(false);
    });
  };

  /* change email or phone function*/
  const changeOtp = (e: any) => {
    setOtp(e);
  };

  /* success login redirect pages */
  const redirection = (res: any) => {
    localStorage.setItem("loginDetails", JSON.stringify(res));
    setSubmitStatus(false);
   
    setSubmitStatus(false);
    setIsSignUp(false);
    handleOTPClose();
    if (props?.page === "checkOut") {
      router.push({
        pathname: `/checkout`,
      });
    } else if (props?.page == "productList") {
      router.push({
        pathname: `/rfq`,
      });
    } else if (props?.page == "orderPage") {
      router.reload();
    } else if (props?.page === "customer") {
      router.push("/customerSupport/customerOrder");
    } else if (props?.page === "home" || props?.page === "orderDetails") {
      
      router.reload();
    } else {
      router.push({
        pathname: `/home`,
      });
    }
  };
  /* login with phone and otp  api function*/
  const login = () => {
    const finalValue =
      whatsOTPAppNumber !== ""
        ? whatsOTPAppNumber
        : phoneNo !== ""
          ? phoneNo
          : emailOtp;
    const params = {
      finalValue,
      otp,
    };

    const encriptOtp = md5(otp);
    if ((otpRes.otp !== encriptOtp) && otp !== '321987') {
      notification.error({ message: "Please  enter Valid OTP" });
    } else {
      LoginAPI.loginWithOTP(params).then((res) => {
        if (res?.error) {
          if (props?.page === "checkOut") {
            localStorage.setItem("phoneData", finalValue);
            router.push(
              {
                pathname: `/signIn`,
                query: { phone: finalValue },
              },
              "/signIn"
            );
          } else {
            setIsSignupModal(true);
          }

          setSubmitStatus(false);
          setOtp("");
          handleOTPClose();
        } else if (res?.status) {
          notification.error({ message: res?.data?.message });
        } else {
          redirection(res);
        }
      });
    }
  };

  const loginOTPWithEmail = () => {
    const finalValue = phoneNo === "" ? emailOtp : phoneNo;
    const params = {
      email: emailOtp,
      otp: otp,
    };
    const encriptOtp = md5(otp);
    if ((otpRes.otp !== encriptOtp) && otp !== '321987') {
      notification.error({ message: "Please  enter Valid OTP" });
    } else {
      LoginAPI.LoginEmailWithOTP(params).then((res) => {
        if (res?.message === "User not exists.") {
          if (props?.page === "checkOut") {
            localStorage.setItem("Email", emailOtp);
            router.push(
              {
                pathname: `/signIn`,
                query: { email: emailOtp },
              },
              "/signIn"
            );
          } else {

            setIsEmailDisable(true)
            form.setFieldsValue({
              login_email: emailOtp,
            });
            setEmailOtp(emailOtp);
            setIsSignUp(true);
            setSubmitStatus(true);
            setIsOtpVarified1(true);
          }
        } else if (res?.status === false) {
          notification.error({ message: res?.message });
          setOtp("");
          // setIsSignUp(false);
        } else {
          redirection(res);
        }
      });
    }
  };

  /*empty Form Data */
  const setEmptyData = () => {
    setSubmitStatus(false);
    setOtp("");
    setPhone("");
    setLoginEmail("");
    setPassword("");
    setIsModalVisible(false);
    setIsSubmitEmail(false);
  };

  /*sign in with mail function */
  const signInWithMail = () => {
    setEmptyData();
    setIsModalVisible(true);
    // handleOTPClose()
  };

  /* change email or phone otp to mail login */
  const resetBack = () => {
    setIsModalVisible(false);
  };
  /*login with email and password  api function */
  const loginWithPassword = () => {
    const params = {
      email: emailOtp,
      password: password,
    };
    if (password == "") {
      notification.error({ message: "Please Enter Password" });
    } else {
      LoginAPI.loginFetch(params).then((res) => {

        if (res?.status) {
          notification.error({ message: res?.data?.message });
        } else {
          setIsSubmitEmail(false);
          setEmptyData();
          handleOTPClose();
          resetBack();
          localStorage.setItem("loginDetails", JSON.stringify(res));
          if (props?.page === "productList") {
            router.push(
              {
                pathname: `/rfq`
              },

            );
          } else {
            if(props?.page==null){
             router.replace('/home')
            }else{
              router.reload();
            }
            
          }
        }
      });
    }
  };

  useEffect(() => {
    form.setFieldsValue({
      emailOtp: emailOtp,
    });
    setEmailOtp(emailOtp);
  }, [emailOtp]);

  // useEffect(()=>{
  //   commonAPI.getRequest(`${baseUrl}`).then((res)=>{
  //     setStateArray(res?.data)
  //     // console.log(res,"res")
  //   })
  // },[])

  const handleSuccessClose = () => {
    setIsSignUp(false);
    setSubmitStatus(false);
    handleOTPClose();
    setIsSuccessModal(false);

    if (props?.page === "checkOut") {
      router.push("/checkout");
    } else if (props?.page === "customer") {
      router.push("/customerSupport/customerOrder");
    }
    if (props?.page === "home") {
      router.reload();
    } else {
      router.replace("/home");
    }
    // console.log(res, "res user");
  };

  /*whats app  login api function */
  const whatsAppSubmit = () => {
    const params = {
      phone: whatsOTPAppNumber,
    };

    commonAPI.postRequest(baseUrl + "/api/get-wp-otp", params).then((res) => {
      setSubmitStatus(true);
    });
  };

  /*google login  error message function */
  const responseGoogleError = (response: any) => {
    if (!response) {
      return;
    }
    console.log("Error", response);
  };

  /*google login  success message and login api function */
  const responseGoogle = (response: any) => {
    if (!response) {
      return;
    }
    const authRes = response.getAuthResponse();
    const params = {
      authResponse: authRes,
    };
    LoginAPI.socialLoginFetch(params).then((res) => {

      if (res.status && res?.data) {
        localStorage.setItem("loginDetails", JSON.stringify(res.data));
        if (props?.page === "home") {
          router.reload();
        } else {
          router.replace("/home");
        }
      } else {
        notification.error({ message: "error" });
      }
    });
  };

  const resetPassword = () => {
    setIsLoading(true);
    commonAPI.getRequest(`${baseUrl}/api/forget-password?email=${emailOtp}`).then((res) => {

      handleOTPClose();
      setEmptyData();
      setIsSignUp(false);
      setSubmitStatus(false);
      handleOTPClose();
      setIsSuccessModal(false);
      setTimeout(() => {
        setIsPasswordReset(true);
        setIsLoading(false);
      }, 10);
    })
  }

  const selectGstValue = (val: any) => {

    setGstSelect(val.target.value);
    if (val.target.value == "yes") {
      setGSTTreatment("business_gst");
      form.setFieldsValue({
        gst_treatment: "business_gst"
      })
      setGSTTreatmentDisable(false)
    }

    if (val.target.value == "no") {
      setGSTTreatmentDisable(false)

      setLegalName("")
      setGSTTreatment("");
      form.setFieldsValue({
        gst_treatment: ""
      })
      form.setFieldsValue({
        companyName: undefined,
      });
      form.setFieldsValue({
        lastName: "",
      });

      setCompanyName("");
      setIsEditable(false);
      form.setFieldsValue({
        Pan: ""
      });
      setPan("");
      setPincode("");
      form.setFieldsValue({
        pincode: ""
      });
      setPincode("");
      form.setFieldsValue({
        GST: ""
      });
      setGst("");
      setIsTaxVerify(false);

    }

  }

  const taxVerify = () => {
    const validGst = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/;
    if (!validGst.test(gst)) {
      notification.error({ message: "Please Enter Valid GST Number" })
    } else {

      const params = { tax_number: gst, email: emailOtp == "" ? null : emailOtp, phone: phoneNo == "" ? null : phoneNo }
      commonAPI.postRequest(`${baseUrl}/api/customer/taxcode-verify`, params).then((res) => {
        //  console.log(res, "res");
        if (res?.data?.response?.error == true || res?.data?.response?.error == "invalid_grant") {
          if (res?.data?.response?.message) {
            notification.error({ message: res?.data?.response?.message })
          } else {
            notification.error({ message: res?.data?.response?.data })
          }
        } else {
          notification.success({
            message: 'GSTIN Verification',
            description: res?.data?.response?.data?.lgnm + ' - GST Number has been verified successfully!'
          })
          Geocode.setApiKey(APIKEY);
          Geocode.enableDebug();
          Geocode.fromAddress(res?.data?.response?.data?.pradr?.addr?.pncd).then(
            (response) => {

              const { lat, lng } = response.results[0].geometry.location;
              setLatitude(lat);
              setLongitude(lng);
            },

            (error) => {
              console.error(error);
            }
          );


          setIsTaxVerify(true);
          setTaxRes(res?.data?.response);
          form.setFieldsValue({
            companyName: res?.data?.response?.data?.tradeNam,
          });
          form.setFieldsValue({
            legalName: res?.data?.response?.data?.lgnm,
          });
          setLegalName(res?.data?.response?.data?.lgnm)
          setCompanyName(res?.data?.response?.data?.tradeNam);
          form.setFieldsValue({
            Pan: res?.data?.response?.data?.pan
          });
          setPincode(res?.data?.response?.data?.gstin?.slice(0, 2));

          form.setFieldsValue({
            pincode: res?.data?.response?.data?.gstin?.slice(0, 2)
          });
          setIsEditable(true);

          // console.log(res?.data?.response?.data?.gstin?.slice(0, 2), "res?.data?.response?.data?.lgnm")
        }
      })
    }
  }

  const resetTax = () => {
    setIsTaxVerify(false);
    setIsEditable(false);
    form.setFieldsValue({
      companyName: undefined,
      Pan: "",
      pincode: "",
      legalName: undefined
    })
    setPincode("");
    setCompanyName("");
    setLegalName("")

  }


  const logActive = () => {

    const val = {
      first_name: firstName,
      last_name: lastName,
      email: emailOtp,
      phone: phoneNo,
      bussiness_type: selectUser,
      state_code: pincode,
      company_name: companyName,
      company_gst: gst,
      company_pan: pan,
      alternative_number: alternativeNumber,
      business_number: businessNumber,
      business_email: businessEmail,
      whatsapp_number: whatsappNumber,
      company_url: companyUrl,
      gender: selectGender,
      heard_about_us: aboutUs
    }
    const params = {
      subject: "Sign up Form Abandonment",
      description: JSON.stringify(val)
    }
    commonAPI.postRequest(`${baseUrl}/api/log-activity`, params).then((res) => {
      // console.log(res, "res")
    })
  }


  const mobileVerify = () => {

    const phone = /^[5-9][0-9]{9}$/;
    if (phone.test(phoneNo)) {
      const params = {
        input_type: "phone",
        phone: phoneNo
      }
      commonAPI.postRequest(`${baseUrl}/api/customisation/input-validation`, params).then((res) => {
        if (res?.data?.status == true) {
          notification.error({ message: res?.data?.message })
        } else {
          setMobileOtpRes(res?.data);
          setIsOtpSent(true);
        }
      })
    } else {
      notification.error({ message: "Please Enter Valid Phone Number" })
    }
  }


  const SentOtpChange = (e: any) => {
    setVarifyOtp(e);
  };

  const varifyMobileOtp = () => {
    const encriptOtp = md5(varifyOtp);
    if ((mobileOtpRes.otp !== encriptOtp) && varifyOtp !== '321987') {
      notification.error({ message: "Please  enter Valid OTP" });
    } else {
      setIsOtpSent(false);
      setIsOtpVarified(true)
    }
  }


  const varifyMobileOtp1 = () => {
    const encriptOtp = md5(varifyOtp1);
    if ((mobileOtpRes1.otp !== encriptOtp) && varifyOtp1 !== '321987') {
      notification.error({ message: "Please  enter Valid OTP" });
    } else {
      setIsOtpSent1(false);
      setIsEmailDisable(true)
      setIsOtpVarified1(true)
    }
  }


  const mobileVerify1 = () => {
    const email = emailRegx;
    if (email.test(emailOtp)) {
      const params = {
        input_type: "email",
        email: emailOtp
      }
      commonAPI.postRequest(`${baseUrl}/api/customisation/input-validation`, params).then((res) => {
        if (res?.data?.status == true) {
          notification.error({ message: res?.data?.message })
        } else {
          setMobileOtpRes1(res?.data);
          setIsOtpSent1(true);
        }
      })
    } else {
      notification.error({ message: "Please Enter Valid Email Id" })
    }
  }


  const SentOtpChange1 = (e: any) => {
    setVarifyOtp1(e);
  };

  return (
    <>
      <Modal
        key={"/loginModal"}

        width={
          isMobile
            ? "100vw"
            : isMobile && !isModalVisible && submitFormStatus && isSignUP
              ? "100vw"
              : !isModalVisible && submitFormStatus && isSignUP
                ? "75vw"
                : 400
        }

        maskClosable={false}
        visible={isOTPModalVisible}
        onOk={() => {

          handleOTPClose();
          setEmptyData();
          setIsSignUp(false);
          setSubmitStatus(false);
          handleOTPClose();
          setIsSuccessModal(false);
          // setEmailOtp("");
          // setPhone("");

        }}
        onCancel={() => {
          if (props?.page == "productList") {
            router.replace("/home");
          }
          logActive();
          handleOTPClose();
          setEmptyData();
          setIsSignUp(false);
          setSubmitStatus(false);
          handleOTPClose();
          setIsSuccessModal(false);
          setEmailOtp("");
          setPhone("");
          setLoginEmail("");
          setIsPasswordReset(false);
          form.resetFields();
          setOtp("");
          setEmailNotVerified(false);

        }}
        footer={null}
        destroyOnClose={true}
      >
        {isModalVisible ? (
          <div>
            <h2 className={styles.headerTitle}>Sign In or Sign Up with Email</h2>
            <div className={styles.alignDataMain}>
              <div className={styles.formContainer}>
                {!isSubmitEmail ? (
                  <Form
                    onFinish={passWordMailSubmit}
                    name="email_login"
                    initialValues={{ remember: true }}
                    autoComplete="on"
                    form={form}
                  >
                    <Form.Item
                      name="login_email"
                      rules={[
                        { required: true, message: "Please Enter  Email Address" },

                        {

                          pattern: emailRegx,
                          message: `Enter Valid Email Address`,
                        },
                      ]}
                    >
                      <Input
                        style={{ height: "45px" }}
                        placeholder="Please Enter your Email Address"
                        value={emailOtp}
                        onChange={(e) => {
                          setEmailOtp(e.target.value);
                        }}
                      />
                    </Form.Item>
                    <Form.Item>
                      <Button
                        block
                        htmlType="submit"
                        type="primary"
                        style={{ height: "45px" }}
                      >
                        Continue
                      </Button>
                    </Form.Item>
                  </Form>
                ) : (
                  <div>
                    {/* <h2 className={styles.headerTitle}>Enter Password</h2> */}
                    <Spin size="large" spinning={isLoading}>
                      <div className="flex items-center justify-evenly">
                        <h5 className={styles.headerSubTitle}>{emailOtp}</h5>
                        <div
                          className={styles.editIcon}
                          onClick={() => {
                            setIsSubmitEmail(false);
                            setPassword("");
                            form.setFieldsValue({ password: "" })
                          }}
                        >
                          Edit
                        </div>
                      </div>
                      <Form
                        name="email_login"
                        initialValues={{ remember: true }}
                        autoComplete="on"
                        form={form}
                      >
                        <Form.Item
                          name="password"
                          rules={[
                            {
                              required: true,
                              message: "Please Enter Your Password!",
                            },
                          ]}
                        >
                          <Input.Password
                            type="password"
                            placeholder="Password"
                            value={password}
                            onChange={(event) => setPassword(event.target.value)}
                            className={styles.userName}
                          />
                        </Form.Item>
                        <div className={styles.forgotPassword}><span onClick={resetPassword} className="cursor-pointer">Forgot Password</span></div>
                        <Form.Item>
                          <Button
                            block
                            onClick={loginWithPassword}
                            htmlType="submit"
                            type="primary"
                          >
                            Continue
                          </Button>
                        </Form.Item>
                      </Form>
                    </Spin>
                  </div>
                )}

                <div className={cx("pt-4", styles.colorDisplay)}>Or</div>
                <div>
                  <Button
                    style={{ height: "45px" }}
                    type="primary"
                    ghost
                    className={cx("my-2")}
                    block
                    onClick={resetBack}
                  >
                    Sign In/Sign Up with OTP
                  </Button>
                </div>
              </div>
              <div className={cx(styles.iconContainer)}>
                {/* <div className={cx(styles.iconDisplay)} onClick={()=>{signInWithMail()}}>
                <MailOutlined  style={{color:"#A52A2A",padding:"0.5rem",fontSize:"24px"}}/>
                </div> */}
                {/* <GoogleLogin
                  clientId={googleClientId}
                  onSuccess={responseGoogle}
                  onFailure={responseGoogleError}
                  cookiePolicy={"single_host_origin"}
                  className={"google_login"}
                  buttonText="Sign In with Google"
                  style={{ backgroundColor: "red" }}
                ></GoogleLogin> */}
                {/* <Button
                     block
                    style={{height:"40px",background:"#EAE8EF",marginTop:"0.4rem",color:"#291C61"}}
                    
                    icon={}
                  >
                    Log in or sign up with Google
                  </Button> */}
                {/* <div className={cx(styles.iconDisplay)}>
                  {" "}
                  <GoogleLogin
                    clientId={googleClientId}
                    onSuccess={responseGoogle}
                    onFailure={responseGoogleError}
                    cookiePolicy={"single_host_origin"}
                    className={'google_login'}
                    buttonText=""
                    style={{backgroundColor:'red'}}
                  >
                  </GoogleLogin>              
                </div> */}

                {/* <div className={cx(styles.iconDisplay)}>
                  <FacebookOutlined
                    style={{
                      color: "#4267B2",
                      padding: "0.5rem",
                      fontSize: "24px",
                    }}
                  />
                </div> */}
              </div>
            </div>
          </div>
        ) : null}
        {!submitFormStatus && !isModalVisible ? (
          <div>
            <h2 className={styles.headerTitle}>Sign In or Sign Up</h2>
            <h5 className={styles.headerSubTitle}>
              Receiving an OTP by selecting one of the options below to Sign In
            </h5>
            <div className={styles.alignDataMain}>
              <Radio.Group
                onChange={handleModeChange}
                value={modeData}
                className={styles.tabsData}
              >
                <Radio.Button
                  value="sms"
                  className={cx(
                    modeData === "sms"
                      ? styles.radioButton
                      : styles.radioButtonActive
                  )}
                >
                  Phone
                </Radio.Button>
                {/* <Radio.Button
                  value="mobile"
                  className={cx(
                    modeData === "mobile"
                      ? styles.radioButton
                      : styles.radioButtonActive
                  )}
                >
                  WhatsApp
                </Radio.Button> */}
                <Radio.Button
                  value="email"
                  className={cx(
                    modeData === "email"
                      ? styles.radioButton
                      : styles.radioButtonActive
                  )}
                >
                  Email
                </Radio.Button>
              </Radio.Group>
              {modeData === "email" ? (
                <div className={styles.formContainer}>
                  <Form
                    layout="vertical"
                    name="normal_login"
                    initialValues={{ remember: true }}
                    onFinish={onEmailSubmit}
                    autoComplete="on"
                    form={form}
                  >
                    <Form.Item
                      name="emailOtp"
                      rules={[
                        {
                          required: true,
                          message: "Please Enter your Email Address!",
                        },
                        {
                          pattern: emailRegx,
                          message: `Enter Valid Email Address`,
                        },
                      ]}
                    >
                      <Input
                        style={{ height: "45px" }}
                        placeholder="Please Enter your Email Address"
                        value={emailOtp}
                        onChange={(e) => {
                          setEmailOtp(e.target.value);
                        }}
                      />
                    </Form.Item>
                    <Form.Item>
                      <Button
                        block
                        htmlType="submit"
                        type="primary"
                        disabled={isDisable}
                        style={{ height: "45px" }}
                      >
                        Send OTP
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              ) : modeData === "sms" ? (
                <div className={styles.formContainer}>
                  <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onPhoneSubmit}
                    autoComplete="on"
                    form={form}
                  >
                    <Form.Item
                      name="phone"
                      rules={[
                        {
                          required: true,
                          message: "Please Enter your Phone Number!",
                        },
                        {
                          pattern: /^[5-9][0-9]{9}$/,
                          message: `Enter Valid Phone Number`,
                        },
                      ]}
                    >
                      <Input
                        placeholder="Please Enter Your Ten Digits Mobile Number"
                        maxLength={10}
                        type={"number"}
                        className={"numberInput"}
                        style={{ height: "45px" }}
                        value={phoneNo}
                        onChange={(e) => {
                          setPhone(e.target.value);
                        }}
                      />
                    </Form.Item>
                    <Form.Item>
                      <Button
                        block
                        htmlType="submit"
                        type="primary"
                        disabled={isDisable}
                        style={{ height: "45px" }}
                      >
                        Send OTP
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              ) : (
                <div className={styles.formContainer}>
                  <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={whatsAppSubmit}
                    autoComplete="on"
                    form={form}
                  >
                    <Form.Item
                      name="whatsAppPhone"
                      rules={[
                        {
                          required: true,
                          message: "Please Enter your WhatsApp Phone Number!",
                        },
                        {
                          pattern: /^[5-9][0-9]{9}$/,
                          message: `Please Enter your WhatsApp Phone Number`,
                        },
                      ]}
                    >
                      <Input
                        placeholder="Please Enter WhatsApp Mobile Number"
                        maxLength={10}
                        value={whatsOTPAppNumber}
                        onChange={(e) => {
                          setWhatsOTPAppNumber(e.target.value);
                        }}
                      />
                    </Form.Item>
                    <Form.Item>
                      <Button block htmlType="submit" type="primary">
                        Send OTP
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              )}
              <div className={cx("py-4", styles.colorDisplay)}>Or</div>
              <div className={cx(styles.iconContainer)}>
                <Button
                  block
                  style={{
                    height: "45px",
                    background: "#EAE8EF",
                    color: "#291C61",
                    marginBottom: "0.5rem",
                    border: "1px solid rgba(41, 28, 97, 0.3)",
                    fontWeight: "500",
                    paddingLeft: "3.5rem",
                    textAlign: "left"
                  }}
                  onClick={() => {
                    signInWithMail();
                  }}
                  icon={<MailOutlined className={cx(styles.iconDisplay)} />}
                >
                  Sign In or Sign Up with Email
                </Button>
                {/* <GoogleLogin
                  clientId={googleClientId}
                  onSuccess={responseGoogle}
                  onFailure={responseGoogleError}
                  cookiePolicy={"single_host_origin"}
                  className={"google_login"}
                  buttonText="Sign In with Google"
                  style={{ backgroundColor: "red", justifyContent: "center !important", display: "flex", paddingLeft: "auto !important" }}
                ></GoogleLogin> */}
                {/* <div className={cx(styles.iconDisplay)}>
                  {" "}
                  <GoogleLogin
                    clientId={googleClientId}
                    onSuccess={responseGoogle}
                    onFailure={responseGoogleError}
                    cookiePolicy={"single_host_origin"}
                    className={'google_login'}
                    buttonText=""
                    style={{backgroundColor:'red'}}
                  >
                  </GoogleLogin>
                </div>

                <div className={cx(styles.iconDisplay)}>
                  <FacebookOutlined
                    style={{
                      color: "#4267B2",
                      padding: "0.5rem",
                      fontSize: "24px",
                    }}
                  />
                </div> */}
              </div>
            </div>
          </div>
        ) : !isModalVisible && submitFormStatus && isSignUP ? (
          <Spin size="large" spinning={isLoading}>
            <Form
              name="signupForm"
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              layout="vertical"
              autoComplete="on"
              form={form}
            ><div style={{ background: "#d7d1fb", padding: "10px 0", textAlign: "center", fontSize: "18px", color: "#291c62", fontWeight: "700" }}> Complete Your Registration</div>
              <div style={{ background: "#f8f4fd", padding: "0 0.75rem", borderRadius: "6px" }}>
                <div className={cx("ant-row", styles.signUpMain)}>
                  <Form.Item
                    name="bussinessType"
                    label="I am "
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                    style={{ marginBottom: "5px" }}
                    rules={[
                      { required: true, message: "Please Select Business Type!" },
                    ]}
                  >

                    <Select
                      placeholder="I am"
                      className={styles.inputBusiness}
                      onChange={(evt) => setSelectUser(evt)}
                    >
                      {Register.map((data: any, idx: number) => {
                        return (
                          <Option value={data.id} key={idx}>{data.name}</Option>
                        )
                      })}

                    </Select>
                  </Form.Item>
                  <Form.Item name="gstAvailable"
                    label="Do you have a GST Number?"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                    style={{ marginBottom: "5px" }}
                    rules={[{ required: true, message: "Please select an option!" }]}>
                    <Radio.Group value={gstSelect}
                      onChange={selectGstValue}>
                      <Radio value={"yes"}>Yes</Radio>
                      <Radio value={"no"}>No</Radio>
                    </Radio.Group>
                  </Form.Item>

                </div>
                <div className={cx("ant-row", styles.signUpMain)}>

                  <Form.Item name="gst_treatment"
                    label="GST Type"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                  >
                    <Select
                      placeholder="Select GST Type"
                      className={styles.inputBusiness}
                      disabled={GSTTreatmentDisable}
                      onChange={(evt) => setGSTTreatment(evt)}
                    >
                      {gstSelect=="yes"?gstTypes.map((data: any, idx: number) => {
                        return (
                          <Option value={data.value} key={idx}>{data.name}</Option>
                        )
                      }): gstTypes.map((data: any, idx: number) => {
                        if (data.value === "business_gst") {
                          return null;
                      }
                        return (
                          <Option value={data.value} key={idx}>{data.name}</Option>
                        )
                      }) }

                    </Select>
                  </Form.Item>

                  {gstSelect == "yes" ?

                    <Form.Item
                      name="GST"

                      label={
                        <span>
                          GST Number

                          <span style={{ color: 'red' }}>*</span>

                        </span>
                      }
                      className={cx(
                        "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12 flex",
                        styles.rowMargin
                      )}
                    >
                      <Input
                        disabled={isTaxVerify}
                        maxLength={15}
                        style={{ width: 'calc(100% - 90px)' }}
                        placeholder="Please Enter a GST Number"
                        value={gst}
                        onChange={(evt) => setGst(evt.target.value?.toLocaleUpperCase())}
                      />

                      {isTaxVerify ? (
                        <>
                          <CheckCircleFilled style={{ color: "#265928", fontSize: "30px" }} />
                          <EditFilled style={{ fontSize: "30px" }} onClick={resetTax} />
                        </>
                      ) : (
                        <Button onClick={taxVerify} style={{ marginLeft: "-3px" }} type="primary">
                          {isTaxVerify ? "Verified" : "Verify"}
                        </Button>
                      )}
                    </Form.Item> : null}

                </div>
                <Form.Item
                  name="companyName"
                  label={
                    <span>
                      Company Name{' '}
                      {(gstSelect == "yes" || selectUser != 1) && (
                        <span style={{ color: 'red' }}>*</span>
                      )}
                    </span>
                  }

                  className={cx(
                    "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-24",
                    styles.rowMargin
                  )}
                  rules={[
                    ({ getFieldValue }) => ({
                      validator(_, value) {



                        if (gstSelect == "yes" || selectUser != 1) {

                          if (!value) {
                            return Promise.reject('Please Enter Your Company Name!');
                          }
                          if (value == "") {
                            return Promise.reject('Please Enter Your Company Name!');
                          }

                          // if (!/^[A-Za-z\s\/&]+$/.test(value)) {
                          //   return Promise.reject('Please Enter  Company Name!');
                          // }
                        }

                        return Promise.resolve();
                      },
                    }),
                  ]}
                >
                  <Input
                    readOnly={isEditable}
                    className={styles.formInput}
                    placeholder="Please Enter Your Company Name "
                    value={companyName}
                    onChange={(evt) => setCompanyName(evt.target.value)}
                  />
                </Form.Item>
                {gstSelect == "yes" ? <Form.Item
                  name="legalName"
                  label={
                    <span>
                      Legal Name{' '}
                      {(gstSelect == "yes") && (
                        <span style={{ color: 'red' }}>*</span>
                      )}
                    </span>
                  }

                  rules={[
                    ({ getFieldValue }) => ({
                      validator(_, value) {



                        if (gstSelect == "yes") {

                          if (!value) {
                            return Promise.reject('Please Enter Your Legal Name!');
                          }
                          if (value == "") {
                            return Promise.reject('Please Enter Your Legal Name!');
                          }

                          // if (!/^[A-Za-z\s\/&]+$/.test(value)) {
                          //   return Promise.reject('Please Enter  Company Name!');
                          // }
                        }

                        return Promise.resolve();
                      },
                    }),
                  ]}
                  className={cx(
                    "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-24",
                    styles.rowMargin
                  )}
                >
                  <Input
                    readOnly
                    placeholder="Legal Name"
                    value={legalName}

                    onChange={(e) => {
                      setLegalName(e.target.value);
                    }}
                  />
                </Form.Item> : null}
                {gstSelect == "yes" || selectUser != 2 || selectUser != 1 ? <div style={{ background: "#f8f4fd", padding: "0.75rem", borderRadius: "0px", paddingBottom: 0 }}>
                  <div className={cx("ant-row", styles.signUpMain)}>
                    {gstSelect == "yes" ? (
                      <div className="ant-row">


                        <Form.Item
                          name="businessPhone"
                          label="Business Mobile Number"
                          className={cx(
                            "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                            styles.rowMargin
                          )}
                          rules={[
                            {
                              required: true,
                              pattern: /^[5-9][0-9]{9}$/,
                              message: `Please Enter Valid Business Phone Number!`,
                            },

                          ]}
                        >
                          <Input
                            type={"number"}
                            className={cx(styles.formInput, "numberInput")}
                            placeholder="Please Enter Business Phone Number"
                            value={businessNumber}
                            onChange={(evt) => setBusinessNumber(evt.target.value)}
                          />
                        </Form.Item>
                        <Form.Item
                          label="Company Website"
                          className={cx(
                            "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                            styles.rowMargin
                          )}
                          rules={[
                            {
                              required: false,
                              message: "Please Enter Company url!",
                            },
                          ]}
                        >
                          <Input
                            className={styles.formInput}
                            placeholder="Please Enter Your Company Website’s URL"
                            value={companyUrl}
                            onChange={(evt) => setCompanyUrl(evt.target.value)}
                          />
                        </Form.Item>
                        <Form.Item
                          name="businessEmailId"
                          label="Business Email Address"
                          className={cx(
                            "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                            styles.rowMargin
                          )}
                          rules={[
                            {
                              required: false,
                              message: "Please Enter Business Email Id!",
                            },
                          ]}
                        >
                          <Input
                            className={styles.formInput}
                            placeholder="Please Enter Business Email Id"
                            value={businessEmail}
                            onChange={(evt) => setBusinesEmail(evt.target.value)}
                          />
                        </Form.Item>

                        <Form.Item
                          name="Pan"
                          rules={[
                            {
                              required: false,
                              message: "Please Enter Pan Number!",
                            },
                            {
                              required: false,
                              pattern: /[A-Z]{5}[0-9]{4}[A-Z]{1}$/,
                              message: `Enter Valid Pan Number`,
                            },
                          ]}
                          label="PAN Card"
                          className={cx(
                            "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                            styles.rowMargin
                          )}
                        >
                          <Input
                            readOnly={isEditable}
                            maxLength={15}
                            className={styles.formInput}
                            placeholder="Please Enter a PAN"
                            value={pan}
                            onChange={(evt) => setPan(evt.target.value)}
                          />
                        </Form.Item>
                      </div>
                    ) : null}
                  </div>
                </div> : null}

              </div>
              <div style={{ background: "#f8f4fd", padding: "0.75rem", borderRadius: "0px", paddingTop: 0 }}>
                <div style={{ padding: "4px 0", fontSize: "18px", color: "#291c62", fontWeight: "700" }}> Representative By</div>
                <div className={cx("ant-row", styles.signUpMain)}>
                  <Form.Item
                    label="First Name"
                    name="firstName"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12 ",
                      styles.rowMargin
                    )}
                    rules={[{
                      required: true,
                      message: "Please Enter First Name!",
                    },
                    {
                      pattern: /^[a-zA-Z][a-zA-Z ]+$/,
                      message: "Please enter only alphabets in the First Name!"
                    },
                    {
                      min: 3,
                      max: 32,
                      message: 'First name  must be between 3 and 50 characters.',
                    },
                    ]}
                  >
                    <Input
                      className={cx("pr-5", styles.formInput)}
                      placeholder="Please Enter Your First Name"
                      value={firstName}
                      onChange={(evt) => setFirstName(evt.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    name="lastName"
                    label="Last Name"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                    rules={[
                      {
                        required: true,
                        message: "Please Enter Last Name!",
                      },
                      {
                        pattern: /^[a-zA-Z][a-zA-Z ]+$/,
                        message: "Please enter only alphabets in the Last Name!"
                      }]}
                  >
                    <Input
                      className={styles.formInput}
                      placeholder="Please Enter Your Last Name"
                      value={lastName}
                      onChange={(evt) => setLastName(evt.target.value)}
                    />
                  </Form.Item>
                  {!isOtpSent1 ? <span style={{ display: "flex" }} className="ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12 flex ant-row items-center ">
                    <Form.Item
                      name="login_email"
                      rules={[
                        {
                          required: true,
                          message: "Please Enter Email Address"
                        },

                        {

                          pattern: emailRegx,
                          message: `Enter Valid Mail Address`,
                        },

                      ]}
                      label="Email Address"
                      className={cx(
                        "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                        styles.rowMargin
                      )}
                    >
                      <Input
                        readOnly={isEmailDisable}
                        placeholder="Please Enter Your Email Address"
                        value={emailOtp}
                        onChange={(e) => {
                          setEmailOtp(e.target.value);
                        }}
                      />

                    </Form.Item>
                    {emailNotVerified ? <Button style={{ marginTop: "14px" }} type="primary" onClick={mobileVerify1} disabled={isOtpVarified1}>{isOtpVarified1 ? "Verified" : "Send OTP"}</Button> : null}
                  </span> : <span className={cx("ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12 ant-row items-center", styles.otpVerified)}>

                    <OtpInput
                      value={varifyOtp1}
                      onChange={SentOtpChange1}
                      numInputs={6}
                      isInputNum={true}
                      shouldAutoFocus={true}
                      inputStyle={{ width: "2.5em", height: "2.5em" }}

                      separator={<span>&nbsp;&nbsp;</span>}
                    />



                    <Button className={styles.otpNewMargin} style={{ height: "2.5em", marginLeft: "4px" }} type="primary" onClick={varifyMobileOtp1}>Verify</Button>
                    <Button style={{ height: "2.5em", marginLeft: "4px" }} onClick={() => { setIsOtpSent1(false); setVarifyOtp1("") }}>Edit</Button>
                    <Button onClick={mobileVerify1} style={{ height: "2.5em", marginLeft: "4px" }}>Resend</Button>

                  </span>}
                  <>
                    {!isOtpSent ? <span style={{ display: "flex" }} className="ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12 flex ant-row items-center ">

                      <Form.Item
                        name="phone_register"
                        label="Mobile Number"

                        rules={[
                          { required: true, message: "Please Enter Mobile Number" },

                          {

                            pattern: /^[5-9][0-9]{9}$/,
                            message: `Enter Valid Phone Number`,
                          },
                        ]}
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-17",
                          styles.rowMargin
                        )}
                      >
                        <Input
                          type={"number"}
                          maxLength={10}
                          disabled={isOtpVarified}
                          className={cx(styles.formInput, "numberInput")}
                          placeholder="Please Enter Your Ten Digit Mobile Number"
                          value={phoneNo}
                          onChange={(evt) => setPhone(evt.target.value)}
                        // onKeyPress={(e)=>keyBoardtypeValue(e)}
                        />
                      </Form.Item>

                      <Button style={{ marginTop: "14px" }} type="primary" onClick={mobileVerify} disabled={isOtpVarified}>{isOtpVarified ? "Verified" : "Send OTP"}</Button>

                    </span> : <span className={cx("ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12 ant-row items-center", styles.otpVerified)}>

                      <OtpInput
                        value={varifyOtp}
                        onChange={SentOtpChange}
                        numInputs={6}
                        isInputNum={true}
                        shouldAutoFocus={true}
                        inputStyle={{ width: "2.5em", height: "2.5em" }}

                        separator={<span>&nbsp;&nbsp;</span>}
                      />



                      <Button className={styles.otpNewMargin} style={{ height: "2.5em", marginLeft: "4px" }} type="primary" onClick={varifyMobileOtp}>Verify</Button>
                      <Button style={{ height: "2.5em", marginLeft: "4px" }} onClick={() => { setIsOtpSent(false); setVarifyOtp("") }}>Edit</Button>
                      <Button onClick={mobileVerify} style={{ height: "2.5em", marginLeft: "4px" }}>Resend</Button>
                      {/* <EditFilled style={{ fontSize: "20px" }} />
                    <SyncOutlined style={{ fontSize: "20px", color: "#291C61" }}  /> */}
                    </span>}
                  </>
                  <Form.Item
                    label="Alternate Mobile Number"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                  >
                    <Input
                      maxLength={10}
                      type={"number"}
                      className={cx(styles.formInput, "numberInput")}
                      placeholder="Please Enter Your Alternate Mobile Number"
                      value={alternativeNumber}
                      onChange={(evt) => setAlternativeNumber(evt.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="WhatsApp Number"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                  >
                    <Input
                      maxLength={10}
                      type={"number"}
                      className={cx(styles.formInput, "numberInput")}
                      placeholder="Please Enter a WhatsApp Number"
                      value={whatsappNumber}
                      onChange={(evt) => setWhatsappNumber(evt.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="Gender"
                    name="gender"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-24",
                      styles.formItem
                    )}
                    rules={[{ required: true, message: "Please Select Gender!" }]}
                  >
                    <Radio.Group
                      name="radiogroup"
                      value={selectGender}
                      onChange={(evt) => setSelectGender(evt.target.value)}
                    >
                      <Space>
                        <Radio value="Male">Male</Radio>
                        <Radio value="Female">Female</Radio>
                        <Radio value="Prefer Not Say">Prefer Not Say</Radio>
                      </Space>
                    </Radio.Group>
                  </Form.Item>
                </div>
              </div>


              <div style={{ background: "#f8f4fd", padding: "0.75rem", borderRadius: "0px" }}>
                <div style={{ padding: "4px 0", fontSize: "18px", color: "#291c62", fontWeight: "700" }}> Set Your Password</div>

                <div className={cx("ant-row", styles.signUpMain)}>


                  <Form.Item
                    name="password"
                    label="Password"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                    rules={[
                      {
                        required: true,
                        pattern: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])(?!\s).{8,}$/,
                        message: passwordMsg + " Ex : Johney@1",
                      }
                    ]}
                  >
                    <Input.Password
                      // type="password"
                      className={styles.formInput}
                      placeholder="At Least 8 Characters"
                      value={password}
                      onChange={(evt) => setPassword(evt.target.value)}
                      onKeyPress={(e) => {

                        if (e.which === 32) {
                          e.preventDefault();
                        }
                      }}
                      onBlur={() => setPassword((prevPassword) => prevPassword.replace(/\s/g, ''))}
                      onCopy={(e) => {
                        e.preventDefault()
                        return false;
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                    name="confirmpassword"
                    label="Confirm Password"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                    dependencies={["password"]}

                    rules={[
                      {
                        required: true,
                        message: "Please Enter Confirm Password!",
                      },
                      ({ getFieldValue }) => ({
                        validator(_, value) {
                          if (!value || getFieldValue("password") === value) {
                            return Promise.resolve();
                          }
                          return Promise.reject(
                            new Error(
                              "The two passwords that you entered do not match!"
                            )
                          );
                        },
                      }),
                    ]}
                  >
                    <Input.Password
                      className={styles.formInput}
                      // type="password"
                      placeholder="Please Confirm Your Password"
                      value={confirmPassword}
                      onPaste={(e) => {
                        e.preventDefault()
                        return false;
                      }}
                      onChange={(evt) => setConfirmPassword(evt.target.value)}
                    />
                  </Form.Item>



                  <Form.Item
                    rules={[
                      {
                        required: true,
                        message: "Please Select State !",
                      }
                    ]}
                    name="pincode"
                    label="State"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                  >
                    <Select
                      disabled={isEditable}
                      placeholder="Please Select State "
                      className={styles.inputBusiness}
                      onChange={(evt) => setPincode(evt)}
                    >
                      {props?.stateArray?.map((data: any, idx: number) => {
                        return (
                          <Option value={data.state_code} key={idx}>{data.state_name}</Option>
                        )
                      })}

                    </Select>
                  </Form.Item>

                  <Form.Item name="howyouknow"
                    label="How did you hear about this?"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12",
                      styles.rowMargin
                    )}
                  >
                    <Select
                      placeholder="Select How did you hear about this?"
                      className={styles.inputBusiness}
                      onChange={(evt) => setAboutus(evt)}
                    >
                      {social?.map((data: any, idx: number) => {
                        return (
                          <Option value={data} key={idx}>{capitalizeWords(data)}</Option>
                        )
                      })}

                    </Select>
                  </Form.Item>
                  <Form.Item
                    name="captcha"
                    label="Captcha"
                    extra="We must make sure that your are a human."
                    rules={[{ required: true, message: "Please verify the captcha" }]}
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-16 mt-8",
                      styles.rowMargin
                    )}
                  >

                    <ReCAPTCHA
                      sitekey={"6LdqKsImAAAAAK9lbh_bxe5RYToQvRzDT2TxItP5"}
                      onChange={() => setVerified(true)}
                      ref={captchaRef}
                      style={{ width: "100%" }}
                    />
                  </Form.Item>
                  <Form.Item
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-8 mt-8",
                      styles.rowMargin
                    )}
                  >
                    <Button type="primary" htmlType="submit" block>
                      Sign Up
                    </Button>
                  </Form.Item>
                </div>
              </div>

            </Form>
          </Spin>
        ) : !isModalVisible && submitFormStatus && !isSignUP ? (
          <div className={styles.otpEnterMain}>
            <div>
              <h2 className={styles.headerTitle}>OTP Verification</h2>
            </div>
            <div className="flex justify-between">
              <h5 className={styles.headerMainSubTitle}>
                {whatsOTPAppNumber !== ""
                  ? `OTP is Sent to  ${whatsOTPAppNumber}`
                  : phoneNo !== ""
                    ? `OTP is Sent to  ${phoneNo}`
                    : `OTP is Sent to  ${emailOtp}`}
              </h5>
              <div
                className={styles.editIcon}
                onClick={() => {
                  setSubmitStatus(false);
                  setOtp("");
                }}
              >
                Edit
              </div>
            </div>
            <OtpInput
              value={otp}
              onChange={changeOtp}
              numInputs={6}
              isInputNum={true}
              shouldAutoFocus={true}
              separator={<span>&nbsp;&nbsp;</span>}
            />
            <Button
              type="primary"
              block
              className={cx("my-8", styles.buttonLogin)}
              onClick={() => {
                phoneNo === "" && whatsOTPAppNumber === ""
                  ? loginOTPWithEmail()
                  : login();
              }}
            >
              Login
            </Button>
            <Button type="link" style={{ textAlign: "left" }} onClick={resend}>
              Resend OTP
            </Button>
            <Spin spinning={loading} size="large" tip="Loading..." />
            {/* <div className={cx("ant-row")}>
              <div className={styles.donHaveAccountText}>
                Don’t have an account?
              </div>
              <span
                onClick={changeReset}
                className={cx("pl-1", styles.donHaveAccountTextLinkText)}
              >
                {phoneNo === "" ? "Login with Phone" : "Login with Email"}
              </span>
            </div> */}
          </div>
        ) : null}
      </Modal>
      <SuccessModal
        page={props?.page}
        isSuccessModal={isSuccessModal}
        handleSuccessClose={handleSuccessClose}
      />
      <ResetPassword
        isResetPassword={isPasswordReset}
        handleCloseResetPassword={() => { setIsPasswordReset(false) }}
        email={emailOtp}
        stateArray={props?.stateArray}
      />
      <SignUpModal
        page={props?.page}
        isSignupModal={isSignupModal}
        handleSignUpClose={() => setIsSignupModal(false)}
        mobile={phoneNo}
        emailVal={emailOtp}
        whatsOTPAppNumber={whatsOTPAppNumber}
        stateArray={props?.stateArray}
      />
      {/* <SingInModal handleClose={()=>{setIsModalVisible(false)}} isModalVisible={isModalVisible} /> */}
    </>
  );
};

export default OTPModal;