import {
  ArrowRightOutlined,
  CheckCircleFilled,
  MailFilled,
  PhoneFilled
} from "@ant-design/icons";
import styles from "./stepperForm.module.scss";
import OtpInput from "react-otp-input";
import { Button, Image, notification } from "antd";
import { useEffect, useState } from "react";
import * as SellerAPI from "../../../pages/api/seller-api";
import { useRouter } from "next/router";
import { AnyARecord } from "dns";
import cx from "classnames";
const OTPSeller = (props: any) => {
  const [phoneNumber, setphoneNumber] = useState("");
  const [email, setEmail] = useState("");
  const [token, setToken] = useState("");
  const [mobileOtp, setMobileOtp] = useState("");
  const [mailOtp, setMailOtp] = useState("");
  const [isMobileOtpVerified, setIsMobileOtpVerified] = useState(false);
  const [isEmailOtpVerified, setIsEmailOtpVerified] = useState(false);
  const router = useRouter();

  const handleMobileOtp = (mobileOtp: any) => {
    setMobileOtp(mobileOtp);
  };
  const handleMailOtp = (mailOtp: any) => {
    setMailOtp(mailOtp);
  };
  const getVendorOnboardingdata = () => {
    const _keydata: any = sessionStorage.getItem("VendorOnBoarding");
    if (_keydata != "") {
      const data = JSON.parse(_keydata);
      setphoneNumber(data?.phone);
      setToken(data?.token);
      setEmail(data?.email);
      setIsMobileOtpVerified(data?.isMobileOtpVerified ? true : false);
      setIsEmailOtpVerified(data?.isEmailOtpVerified ? true : false);
    } else {
      router.push({
        pathname: `/seller/sellerLogin/signup`,
      });
    }
  };
  useEffect(() => {
    getVendorOnboardingdata();
  }, []);

  useEffect(() => {
    if (isMobileOtpVerified || isEmailOtpVerified) {

      const _keydata: any = sessionStorage.getItem("VendorOnBoarding");
      const _obj: any = JSON.parse(_keydata);

      _obj.isMobileOtpVerified = isMobileOtpVerified;
      _obj.isEmailOtpVerified = isEmailOtpVerified;

      window?.sessionStorage.removeItem("VendorOnBoarding");
      window?.sessionStorage.setItem("VendorOnBoarding", JSON.stringify(_obj));
    }
    if (isMobileOtpVerified && isEmailOtpVerified) {
      window?.sessionStorage.removeItem("SellerBasicDetails");
      window?.sessionStorage.removeItem("VendorOnInput");
      window?.sessionStorage.removeItem("ReverifyType")
      props.onVerified();
    }
  }, [isMobileOtpVerified, isEmailOtpVerified]);

  const veryOTP = (type: string) => {

    if (type == "Mobile" && mobileOtp == "") {
      notification.warn({ message: "Please Enter Mobile OTP" })
    } else if (type == "Email" && mailOtp == "") {
      notification.warn({ message: "Please Enter Email OTP" })
    } else {
      const OTP = type == "Mobile" ? mobileOtp : mailOtp;
      const param: any = {};
      param["token"] = token;
      param[type == "Mobile" ? "mobile_pin" : "email_pin"] = OTP;
      SellerAPI.vefyOTP(param).then((res) => {
        if (res?.status && res?.status.includes("Verified")) {
          notification.success({
            message: "Verification",
            description: type + " OTP verified successfully.",
          });
          type == "Mobile"
            ? setIsMobileOtpVerified(true)
            : setIsEmailOtpVerified(true);
        } else {
          notification.error({
            message: "Verification",
            description: type + " OTP verified failed!",
          });
        }
      });
    }
  };
  const resendOTP = (type: string) => {
    const param: any = {};
    param["token"] = token;
    param[type == "Mobile" ? "mobile_pin_request" : "email_pin_request"] = true;
    SellerAPI.resendOTP(param).then((res) => {
      if (res?.status && res?.status == true) {
        notification.success({
          message: "Resend OTP",
          description: type + " OTP sent successfully.",
        });
      } else {
        notification.error({
          message: "Resend OTP",
          description: type + " OTP sent failed!",
        });
      }
    });
  };

  const routerData = (type: any) => {
    const val: any = window?.sessionStorage.getItem("VendorOnBoarding");
    const finalVal = JSON.parse(val);
    // console.log(finalVal, "finalVal");
    window?.sessionStorage.removeItem("VendorOnBoarding");
    window?.sessionStorage.setItem("ReverifyType", type)
    router.push({
      pathname: `/seller/sellerLogin/signup`,
    });
  };

  return (
    <>
      <h2 className={styles.headerTittle}>OTP Verifications</h2>
      <div className={styles.iconContainer}>
        <div className={styles.iconBackground}>
          <PhoneFilled style={{ color: "#F3465F", fontSize: 30 }} rotate={100} />
          {/* <Image width={36} src={"/images/phone.svg"} alt="phone"  preview={false}/> */}
        </div>

        <div className={cx(styles.otpEnterMain)}>
          <div className="py-2">
            <span className={styles.textNumber}>OTP is sent to your Phone Number +91{phoneNumber}</span>
            {/* {!isMobileOtpVerified ? (<span className={styles.editIcon} onClick={routerData}>
              Edit
            </span>) : null} */}
          </div>
          <OtpInput
            containerStyle={{ marginLeft: "-0.5rem" }}
            value={mobileOtp}
            onChange={handleMobileOtp}
            isInputNum={true}
            numInputs={6}
            separator={<span>&nbsp;&nbsp;</span>}
          />


          <div className={styles.buttonContainer}>
            <Button
              type="primary"
              disabled={isMobileOtpVerified ? true : false}
              onClick={() => {
                veryOTP("Mobile");
              }}
            >
              Verify OTP
            </Button>
            <Button
              type="link"
              disabled={isMobileOtpVerified ? true : false}
              onClick={() => {
                resendOTP("Mobile");
              }}
            >
              Resend OTP?
            </Button>
            <Button
              type="link"
              disabled={isMobileOtpVerified ? true : false}
              onClick={() => { routerData("Mobile") }}
            >
              Wrong Phone No.?
            </Button>
          </div>
        </div>
        {isMobileOtpVerified ? (
          <Button
            ghost
            className={styles.verifiedButton}
            icon={<CheckCircleFilled style={{ color: "#198084" }} />}
            size={"large"}
          >
            Verified
          </Button>
        ) : null}
      </div>
      <div className={cx(styles.iconContainer, "mt-6")}>
        <div className={styles.iconBackground}>
          <MailFilled style={{ color: "#F3465F", fontSize: 30 }} />
        </div>
        <div className={styles.otpEnterMain}>
          <div className="py-2">
            <span className={styles.textNumber}>OTP is sent to your Email Id {email}{" "}</span>
            {/* {!isEmailOtpVerified ? <span className={styles.editIcon} onClick={routerData}>
              Edit
            </span> : null} */}
          </div>
          <OtpInput
            containerStyle={{ marginLeft: "-0.5rem" }}
            value={mailOtp}
            onChange={handleMailOtp}
            isInputNum={true}
            numInputs={6}
            separator={<span>&nbsp;&nbsp;</span>}
          />
          <div className={styles.buttonContainer}>
            <Button
              type="primary"
              disabled={isEmailOtpVerified ? true : false}
              onClick={() => {
                veryOTP("Email");
              }}
            >
              Verify OTP
            </Button>
            <Button
              type="link"
              disabled={isEmailOtpVerified ? true : false}
              onClick={() => {
                resendOTP("Email");
              }}
            >
              Resend OTP?
            </Button>
            <Button
              type="link"
              disabled={isEmailOtpVerified ? true : false}
              onClick={() => { routerData("Email") }}
            >
              Wrong Email?
            </Button>
          </div>
        </div>
        {isEmailOtpVerified ? (
          <Button
            ghost
            className={styles.verifiedButton}
            icon={<CheckCircleFilled style={{ color: "#198084" }} />}
            size={"large"}
          >
            Verified
          </Button>
        ) : null}
      </div>
    </>
  );
};
export default OTPSeller;