import React, { useState, useRef, useEffect } from "react";
import { Formik } from "formik";
import Link from "next/link";
import { Fragment } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { renderImage } from "../../services/imageHandling";
import Image from "next/image";
import { useRouter } from "next/router";
import axios from "axios";
import { useDispatch } from "react-redux";
import { registerUser } from "../../redux/actions/userActions";
import { toast } from "react-toastify";
import OTPInput from "../common-components/OTPInput";
import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { signIn } from "next-auth/react";
import { Loader } from "react-bootstrap-typeahead";

const Signup = props => {
  console.log("props.type", props.type);
  const [otp, setOtp] = useState(new Array(4).fill(""));
  const [isOtpSent, setOtpSent] = useState(false);
  const [otpVerified, setOtpVerified] = useState(false);
  const [loading, setLoading] = useState();
  const dispatch = useDispatch();
  const router = useRouter()
  const otpValue = useRef();
  const changeOtpRef = value => {
    console.log(otpValue);
    if (otpValue.current?.length > 0) {
      otpValue.current = [...otpValue.current, value];
    } else {
      otpValue.current = [value];
    }
  };

  const signupValidationSchema = Yup.object().shape({
    fullname: Yup.string().required("Full name is required"),
    email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"),
    password: Yup.string().required("Password is Required").min(6, "Password must be minimum 6 characters"),
    confirmPassword: Yup.string()
      .required("Confirm Password is Required")
      .oneOf([Yup.ref("password"), null], "Passwords must match"),
    countryCode: Yup.string().required("Country Code is Required"),
    mobile: Yup.string()
      .required("Mobile Number is Required")
      .matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
    termsConditions: Yup.bool().oneOf([true], "Please Accept Terms & Conditions"),
    otp: Yup.string().when("isOtpSent", {
      is: true,
      then: Yup.string()
        .required("Otp is Required")
        .matches(/^[0-9\s]+$/, "Please Enter Correct OTP")
    })
  });

  // Initial errors for required fields
  const initialErrors = {
    fullname: "Full Name is required",
    email: "Email is required",
    password: "Password is required",
    confirmPassword: "Confirm Password is required",
    countryCode: "Country Code is Required",
    mobile: "Mobile Number is Required"
  };

  const handleSendOtp = values => {
    setOtpSent(true);
  };

  const handleVerifyOtp = values => {
    setOtpVerified(true);
    if (props.type == "user") {
    }
  };


  return (
    <Fragment>
      <div className="contaier-fluid login-banner-image">
        {(props?.type == "user" || (props?.type == "vendor" && !otpVerified)) && (
          <div className="row">
            <div className="col-11 col-lg-4 login-div signupdiv">
              <div className="">
                <h2>{props.type == "vendor" ? "Vendor Signup" : "Signup to get more out of the platform"}</h2>
                <div className="form-container">
                  <Formik
                    initialValues={{
                      fullname: "",
                      email: "",
                      password: "",
                      confirmPassword: "",
                      countryCode: "",
                      mobile: "",
                      termsConditions: false
                      //   otp: Otp ? Otp : ""
                    }}
                    // initialErrors={initialErrors}
                    validationSchema={signupValidationSchema}
                    enableReinitialize={true}
                    // onSubmit={e => {
                    //     // e.preventDefault();
                    //     console.log("signup values", e);
                    //     setOtpSent(true)
                    //     if (!isOtpSent) {
                    //     //   handleSendOtp(values);
                    //     }
                    //     if (isOtpSent) {
                    //     //   handleVerifyOtp(values);
                    //     }
                    //   }}
                  >
                    {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isValid, isSubmitting }) => (
                      <Form
                        onSubmit={async e => {
                          if (!isOtpSent) {
                            setLoading(true);
                            e.preventDefault();
                            console.log("values", values);
                            let user;
                            if (props.type == "vendor") {
                              user = await dispatch(registerUser({ ...values, role: "vendor" }));
                            } 
                            if (props.type == "user") {
                              user = await dispatch(registerUser({ ...values, role: "endUser" }));
                            }
                            console.log("response", user);
                            if (user?.data?.status == "fail") {
                              toast.error(user?.data.message);
                              setLoading(false);
                              return;
                            }
                            setOtpSent(true);
                            setLoading(false);
                          } else {
                            e.preventDefault();
                            const oneTimePassword = otp.join("");
                            setLoading(false);
                            const otpRes = await finishVendorOtpVerification({ email: values.email, oneTimePassword });
                            console.log("otpRes", otpRes);
                            if (otpRes.data.ok) {
                              const result = await signIn("credentials", {
                                email: values.email,
                                password: values.password,
                                redirect: false
                              });
                              setLoading(false);
                              console.log("result", result);
                              if (props.type == "vendor") {
                                router.push("/vendor/business-details");
                              } 
                              if (props.type == "user") {
                                router.push("/signup/user/thankyou");
                              }
                              //   toast.success("User registered successflly");
                            } else if (!otpRes.data.ok) {
                              setLoading(false);
                              setOtp(new Array(4).fill(""));
                              toast.error("Invalid OTP, please try again.");
                            }
                          }
                        }}
                      >
                        <div className="input-group">
                          <label>Full Name</label>
                          <input type="text" name="fullname" onChange={handleChange} onBlur={handleBlur} value={values.fullname} placeholder="Your name" />
                          {errors.fullname && touched.fullname && <span className="form-error">{errors.fullname}</span>}
                        </div>
                        <div className="input-group">
                          <label>Email Id</label>
                          <input type="text" name="email" onChange={handleChange} onBlur={handleBlur} value={values.email} placeholder="yourname@example.com" />
                          {errors.email && touched.email && <span className="form-error">{errors.email}</span>}
                        </div>
                        <div className="input-group">
                          <label>Password</label>
                          <input type="password" name="password" onChange={handleChange} onBlur={handleBlur} value={values.password} placeholder="Enter password" />
                          {errors.password && touched.password && <span className="form-error">{errors.password}</span>}
                        </div>
                        <div className="input-group">
                          <label>Confirm Password</label>
                          <input
                            type="password"
                            name="confirmPassword"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.confirmPassword}
                            placeholder="Enter password"
                          />
                          {errors.confirmPassword && touched.confirmPassword && <span className="form-error">{errors.confirmPassword}</span>}
                        </div>
                        <div className="input-group">
                          <label>Mobile No.</label>
                          <div className="contact-number">
                            <select
                              id="countryCode"
                              name="countryCode"
                              onChange={handleChange}
                              onBlur={e => {
                                handleBlur(e);
                                setCountryCode(e.target.value);
                              }}
                              style={{ width: "80px" }}
                            >
                              <option value="+91">+91</option>
                              <option value="+44">+44</option>
                            </select>
                            <input
                              type="text"
                              name="mobile"
                              onChange={handleChange}
                              onBlur={handleBlur}
                              value={values.mobile}
                              placeholder="#@$!%@#"
                              style={{ flex: "0 100%" }}
                            />
                          </div>
                          {errors.mobile && touched.mobile && <span className="form-error">{errors.mobile}</span>}
                        </div>
                        <div className="input-group mb-3">
                          <label className="check-container mb-0 pt-1" htmlFor="termsConditions">
                            <input
                              type="checkbox"
                              id="termsConditions"
                              name="termsConditions"
                              className="check-box me-2"
                              checked={values.termsConditions}
                              onChange={handleChange}
                              onBlur={handleBlur}
                            />
                            <span className="checkmark"></span>I Agree to the <Link href="">terms & conditions*</Link>
                          </label>
                          <br />

                          {errors.termsConditions && touched.termsConditions && <span className="form-error">{errors.termsConditions}</span>}
                        </div>
                        {isOtpSent && (
                          <>
                            <div className="input-group">
                              <label>
                                OTP <span style={{ marginLeft: "190px" }}>00:30</span>
                              </label>
                              <div className="otp-input">
                                <OTPInput setOtp={setOtp} otp={otp} />
                              </div>
                              {errors.otp && touched.otp && <span className="form-error">{errors.otp}</span>}
                            </div>
                            <div>
                              <p>4 digit OTP is been sent on your email address.</p>
                              <div className="d-flex align-items-center mb-4">
                                <p className="mb-0 me-5">Didn’t Receive Yet?</p>
                                <div className="d-flex resend-otp">
                                  <span className="image-container me-2">
                                    <Image src={renderImage("/images/login/icon-resend.png")} layout="fill" className="image" />
                                  </span>
                                  <p className="mb-0">Resend</p>
                                </div>
                              </div>
                            </div>
                          </>
                        )}
                        <div className="input-group mb-0">
                          <Button type="submit" className="btn btn-primary btn-submit" disabled={(!values.termsConditions && !isValid) || loading}>
                            {loading ? <Loader /> : `${isOtpSent ? "Verify OTP" : "Sign Up Now"}`}
                          </Button>
                        </div>
                      </Form>
                    )}
                  </Formik>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </Fragment>
  );
};

export default Signup;