import React, { useState } 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 OTPInput from 'react-otp-input';
import { renderImage } from '../../services/imageHandling';
import Image from 'next/image';
import { useRouter } from 'next/router';

const Signup = (props) => {
    console.log(props.type)
    const router = useRouter();

    const [isFormTouched, setIsFormTouched] = useState(false);
    const [Otp, setOtp] = useState("");
    const [isTermsChecked, setTermsChecked] = useState(false)
    const [fullName, setFullname] = useState("")
    const [emailId, setEmailId] = useState("")
    const [pwd, setPwd] = useState("")
    const [confirmPwd, setConfirmPwd] = useState("")
    const [countryCode, setCountryCode] = useState("+91")
    const [mobileNo, setMobileNo] = useState("")
    const [isOtpSent, setOtpSent] = useState(false)
    const [otpVerified, setOtpVerified] = useState(false)

    const handleOTPChange = (e) => {
        setOtp(e);
    };

    const signupValidationSchema = Yup.object().shape({
        fullname: Yup.string()
            .required("Fullname is Required"),
        email: Yup.string()
            .required("Email Id is Required")
            .email("Please Enter An Valid Email Id"),
        password: Yup.string()
            .required("Password is Required"),
        confirm_password: Yup.string()
            .oneOf([Yup.ref("password"), null], "Passwords must match")
            .required("Confirm Password is Required"),
        country_code: Yup.string()
            .required("Country Code is Required"),
        mobile: Yup.string()
            .required("Mobile Number is Required")
            .matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
        is_terms_checked: 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",
        confirm_password: "Confirm Password is required",
        country_code: "Country Code is Required",
        mobile: "Mobile Number is Required",
    };

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

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

    return (
        <Fragment>
            <div className="contaier-fluid login-banner-image">
                {(props?.type == "user" || (props?.type == "vendor" && !otpVerified)) && (
                    <div className="row">
                        <div className="col-12 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: fullName ? fullName : "",
                                            email: emailId ? emailId : "",
                                            password: pwd ? pwd : "",
                                            confirm_password: confirmPwd ? confirmPwd : "",
                                            country_code: countryCode ? countryCode : "",
                                            mobile: mobileNo ? mobileNo : "",
                                            is_terms_checked: isTermsChecked,
                                            otp: Otp ? Otp : "",
                                        }}
                                        // initialErrors={initialErrors}
                                        validationSchema={signupValidationSchema}
                                        enableReinitialize={true}
                                        onSubmit={values => {
                                            console.log("signup values", values)
                                            if (!isOtpSent) {
                                                handleSendOtp(values)
                                            }
                                            if (isOtpSent) {
                                                handleVerifyOtp(values)
                                            }
                                        }}
                                    >
                                        {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isValid, isSubmitting }) => (
                                            <Form
                                                onSubmit={e => {
                                                    e.preventDefault();
                                                    handleSubmit();
                                                }}
                                            >
                                                <div className="input-group">
                                                    <label>Fullname</label>
                                                    <input
                                                        type="text"
                                                        name="fullname"
                                                        onChange={handleChange}
                                                        onBlur={(e) => {
                                                            handleBlur(e)
                                                            setFullname(e.target.value)
                                                        }}
                                                        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={(e) => {
                                                            handleBlur(e)
                                                            setEmailId(e.target.value)
                                                        }}
                                                        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="text"
                                                        name="password"
                                                        onChange={handleChange}
                                                        onBlur={(e) => {
                                                            handleBlur(e)
                                                            setPwd(e.target.value)
                                                        }}
                                                        value={values.password}
                                                        placeholder="#@$!%@#"
                                                    />
                                                    {errors.password && touched.password && (<span className="form-error">{errors.password}</span>)}
                                                </div>
                                                <div className="input-group">
                                                    <label>Confirm Password</label>
                                                    <input
                                                        type="text"
                                                        name="confirm_password"
                                                        onChange={handleChange}
                                                        onBlur={(e) => {
                                                            handleBlur(e)
                                                            setConfirmPwd(e.target.value)
                                                            if (pwd !== e.target.value) {
                                                                alert("Passwords do not Match")
                                                            }
                                                        }}
                                                        value={values.confirm_password}
                                                        placeholder="#@$!%@#"
                                                    />
                                                    {errors.confirm_password && touched.confirm_password && (<span className="form-error">{errors.confirm_password}</span>)}
                                                </div>
                                                <div className="input-group">
                                                    <label>Mobile No.</label>
                                                    <div className="contact-number">
                                                        <select
                                                            id="country_code"
                                                            name="country_code"
                                                            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={(e) => {
                                                                handleBlur(e)
                                                                setMobileNo(e.target.value)
                                                            }}
                                                            value={values.mobile}
                                                            placeholder="#@$!%@#"
                                                            style={{ flex: "0 100%" }}
                                                        />
                                                    </div>
                                                    {errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)}
                                                </div>
                                                {isOtpSent && (
                                                    <>
                                                        <div className="input-group">
                                                            <label>OTP <span style={{ marginLeft: "190px" }}>00:30</span></label>
                                                            <div className="otp-input">
                                                                <OTPInput
                                                                    value={Otp}
                                                                    onChange={handleOTPChange}
                                                                    numInputs={4}
                                                                    separator={<span> </span>}
                                                                    renderInput={props => <input {...props} />}
                                                                />
                                                            </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-3">
                                                    <label className="check-container mb-0 pt-1" htmlFor="is_terms_checked">
                                                        <input
                                                            type="checkbox"
                                                            id="is_terms_checked"
                                                            name="is_terms_checked"
                                                            className="check-box me-2"
                                                            checked={values.is_terms_checked}
                                                            onChange={e => {
                                                                handleChange(e);
                                                                setTermsChecked(e.target.checked)
                                                            }}
                                                            onBlur={handleBlur}
                                                        />
                                                        <span className="checkmark"></span>I Agree to the <Link href="">terms & conditions*</Link>
                                                    </label>
                                                    {errors.is_terms_checked && touched.is_terms_checked && (<span className="form-error">{errors.is_terms_checked}</span>)}
                                                </div>
                                                <div className="input-group mb-0">
                                                    <Button type="submit" className="btn btn-primary btn-submit" disabled={Object.keys(errors).length}>
                                                        Sign Up Now
                                                    </Button>
                                                </div>
                                            </Form>
                                        )}
                                    </Formik>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {props.type && props.type == "vendor" && otpVerified && (
                    <div className="row">
                        <div className="col-12 col-lg-4 login-div">
                            <div className="thankyou-div">
                                <span className="image-container">
                                    <Image src={renderImage("/images/login/success.png")} layout="fill" className="image" />
                                </span>
                                <h2 className="mt-2 px-4 mb-0">Thank you for Signing Up with Us</h2>
                                <p className="mb-4">Your Profile is been created successfully</p>
                            </div>

                            <div className="form-container">
                                <div className="input-group mb-2">
                                    <Button type="button" className="btn btn-primary btn-submit"
                                        onClick={() => {
                                            router.push("")
                                        }}>
                                        Proceed to Dashboard
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </Fragment>
    )
}

export default Signup;