import Image from "next/image";
import React, { useEffect, useState } from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { useDispatch, useSelector } from "react-redux";
import { getSession } from "next-auth/react";
import axios from "axios";
import { toast } from "react-toastify";
import { Loader } from "react-bootstrap-typeahead";
import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { useRouter } from "next/router";
// import { getCurrentEndUser } from "../../redux/actions/userActions";

const validationSchema = Yup.object().shape({
  customAmt: Yup.string().required("Full name is required"),
  code: Yup.string().required("Please Enter 4-Digit Code"),
  email: Yup.string().email("Invalid email").required("Email is required"),
  receiverEmail: Yup.string().email("Invalid email").required("Email is required"),
  message: Yup.string().required("Message is required")
});

let formik1;

const GiftCard = () => {
  const router = useRouter()
  const dispatch = useDispatch();
  // useEffect(() => {
  //   dispatch(getCurrentEndUser());
  // }, []);
  const [session, setSession] = useState(null);
  const [loading, setloading] = useState(null);

  useEffect(() => {
    const fetchSession = async () => {
      setSession(await getSession());
    };
    fetchSession();
    // dispatch(getLoggedInVendor());
  }, []);
  // const {loadedUser} = useSelector(state => state.loadedUser)
  // const { endUser } = useSelector(state => state.endUser);
  console.log("endUser", session);
  const [isStep1, setIsStep1] = useState(true);
  const [amount, setAmount] = useState(0);
  const [custom, setcustom] = useState();

  const [isStep2, setIsStep2] = useState(false);
  const [isResult, setIsResult] = useState(false);
  const [showTooltip1, setShowTooltip1] = useState(false); // State for first tooltip
  const [showTooltip2, setShowTooltip2] = useState(false); // State for second tooltip
  const tooltipText1 = "Enter your Email Id. We'll send you a 4-digit code to verify";
  const tooltipText2 = "Enter your Receiver’s Email Id whom you wish to send gift card.";
  const handleclose = () => {
    setIsResult(false);
    setIsStep1(true);
  };

  return (
    <section className="gift-card-session">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-md-10">
            {!isResult && (
              <div className="row">
                <div className="col-md-5">
                  <div className="gift-card-lt">
                    <div className="gift-box">
                      <img src="/images/zango-logo.svg" alt="Gift Card" />
                    </div>
                    <h3>Amount: ${amount}</h3>
                  </div>
                </div>
                <div className="col-md-7">
                  {isStep1 && (
                    <div className="gift-card-rt">
                      <div className="back-btn">
                        <a href="">
                          <span className="image-container">
                            <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left-02.svg" />
                          </span>
                        </a>
                      </div>
                      <Formik
                        initialValues={{
                          customAmt: "",
                          email: "",
                          receiverEmail: "",
                          message: ""
                        }}
                        enableReinitialize={true}
                        // validationSchema={validationSchema}
                        onSubmit={(values, { setSubmitting }) => {
                          // Handle form submission here
                        }}
                      >
                        {({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
                          <Form action="" className="form-01">
                            <div className="title">Buy a gift card</div>
                            <div className="cl-gry">Please select an amount</div>
                            <div className="gift-card-amt">
                              <ul>
                                <li>
                                  <input
                                    name="amt"
                                    id="amt-250"
                                    type="radio"
                                    value=""
                                    data-gtm-Form-interact-field-id="1"
                                    onChange={e => {
                                      setAmount(250);
                                      setcustom(false);
                                    }}
                                  />
                                  <label for="amt-250">$250</label>
                                </li>
                                <li>
                                  <input
                                    name="amt"
                                    id="amt-500"
                                    type="radio"
                                    value=""
                                    data-gtm-form-interact-field-id="1"
                                    onChange={e => {
                                      setAmount(500);
                                      setcustom(false);
                                    }}
                                  />
                                  <label for="amt-500">$500</label>
                                </li>
                                <li>
                                  <input
                                    name="amt"
                                    id="amt-750"
                                    type="radio"
                                    value=""
                                    data-gtm-form-interact-field-id="1"
                                    onChange={e => {
                                      setAmount(750);
                                      setcustom(false);
                                    }}
                                  />
                                  <label for="amt-750">
                                    <span>Most Popular</span>
                                    <br /> $750
                                  </label>
                                </li>
                                <li>
                                  <input
                                    name="amt"
                                    id="amt-1000"
                                    type="radio"
                                    value=""
                                    data-gtm-form-interact-field-id="1"
                                    onChange={e => {
                                      setAmount(1000);
                                      setcustom(false);
                                    }}
                                  />
                                  <label for="amt-1000"> $1000</label>
                                </li>
                                <li>
                                  <input
                                    name="amt"
                                    id="amt-1500"
                                    type="radio"
                                    value=""
                                    data-gtm-form-interact-field-id="1"
                                    onChange={e => {
                                      setAmount(1500);
                                      setcustom(false);
                                    }}
                                  />
                                  <label for="amt-1500"> $1500</label>
                                </li>
                                <li>
                                  <input
                                    name="amt"
                                    id="amt-custom"
                                    type="radio"
                                    value=""
                                    data-gtm-form-interact-field-id="1"
                                    onChange={e => {
                                      setcustom(true);
                                      setAmount(null);
                                    }}
                                  />
                                  <label for="amt-custom"> $ Custom</label>
                                </li>
                              </ul>
                            </div>
                            <div className="row">
                              {custom && (
                                <div className="col-md-12 mb-4">
                                  <label htmlFor="">Custom Amount</label>
                                  <Field
                                    className="form-control"
                                    type="number"
                                    name="customAmt"
                                    placeholder="Enter your amount"
                                    onChange={e => {
                                      setAmount(e.target.value);
                                    }}
                                    onBlur={handleBlur}
                                    value={amount}
                                  />
                                  {touched.customAmt && errors.customAmt && <div className="text-danger">{errors.customAmt}</div>}
                                </div>
                              )}
                              <div className="col-md-12 mb-4">
                                <label htmlFor="">Email Id</label>
                                <Field
                                  className="form-control"
                                  type="email"
                                  name="email"
                                  placeholder="yourname@example.com"
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.email}
                                />
                                {touched.email && errors.email && <div className="text-danger">{errors.email}</div>}
                                <div className="tooltip-wrapper">
                                  <a className="tooltip-btn" onMouseEnter={() => setShowTooltip1(true)} onMouseLeave={() => setShowTooltip1(false)}>
                                    <span className="image-container">
                                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
                                    </span>
                                  </a>

                                  {/* Tooltip */}
                                  {showTooltip1 && <div className="tooltips">{tooltipText1}</div>}
                                </div>
                              </div>

                              <div className="col-md-12 mb-4">
                                <label htmlFor="">Receiver’s Email Id</label>
                                <Field
                                  className="form-control"
                                  type="receiverEmail"
                                  name="receiverEmail"
                                  placeholder="yourname@example.com"
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.receiverEmail}
                                />
                                {touched.receiverEmail && errors.receiverEmail && <div className="text-danger">{errors.receiverEmail}</div>}
                                <div className="tooltip-wrapper">
                                  <a className="tooltip-btn" onMouseEnter={() => setShowTooltip2(true)} onMouseLeave={() => setShowTooltip2(false)}>
                                    <span className="image-container">
                                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
                                    </span>
                                  </a>

                                  {showTooltip2 && <div className="tooltips">{tooltipText2}</div>}
                                </div>
                              </div>

                              <div className="col-md-12 mb-4">
                                <Field
                                  className="form-control"
                                  as="textarea"
                                  rows={7}
                                  name="message"
                                  placeholder="Type your message..."
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.message}
                                />
                                {touched.message && errors.message && <div className="text-danger">{errors.message}</div>}
                              </div>
                              <div className="col-md-12 mb-3">
                                <button
                                  className="btn btn-primary w-100"
                                  onClick={async () => {
                                    setloading(true);
                                    if (!session) {
                                      toast.warning("Please log in to buy a gift card.");
                                      return;
                                    }
                                    const config = {
                                      headers: {
                                        "Content-Type": "application/json",
                                        Authorization: `Bearer ${session.jwt}`
                                      }
                                    };
                                    const data = {
                                      data: {
                                        userId: session.id
                                      }
                                    };
                                    const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/end-user/verify-gift-card-otp`, data, config);
                                    console.log("response", response.data);
                                    setloading(false);
                                    console.log(values);
                                    setIsStep2(true);
                                    setIsStep1(false);
                                  }}
                                  disabled={!amount > 0 || !values.receiverEmail || !values.email}
                                >
                                  {loading ? <Loader /> : "Continue"}
                                </button>
                              </div>
                              <div className="col-12">
                                <p>
                                  By continuing you agree to our <a href="">Terms</a> and <a href="">Privacy Policy</a>
                                </p>
                              </div>
                            </div>
                          </Form>
                        )}
                      </Formik>
                    </div>
                  )}

                  {isStep2 && (
                    <div className="gift-card-rt">
                      <div className="back-btn">
                        <a href="">
                          <span className="image-container">
                            <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left-02.svg" />
                          </span>
                        </a>
                      </div>
                      <Formik
                        initialValues={{
                          code: ""
                        }}
                        // validationSchema={validationSchema}
                        onSubmit={(values, { setSubmitting }) => {
                          // Handle form submission here
                          console.log(values);
                          setSubmitting(false);
                          setIsStep2(false);
                          setIsStep1(false);
                          setIsResult(true);
                        }}
                      >
                        {({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
                          <Form action="" className="form-01">
                            <div className="title">We emailed you a 4-digit code</div>
                            <div className="cl-gry">Please enter it below to create or login into your account:</div>

                            <div className="row mt-4">
                              <div className="col-md-12 mb-4">
                                <label htmlFor="">Enter 4-Digit Code</label>
                                <Field
                                  className="form-control"
                                  type="text"
                                  name="code"
                                  placeholder="Enter the code we emailed you"
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.code}
                                />
                                {touched.code && errors.code && <div className="text-danger">{errors.code}</div>}
                                <div className="link-a">
                                  <a href="">Resend Code</a>
                                </div>
                              </div>
                            </div>
                            <div className="row">
                              <div className="col-md-12 mb-3">
                                <button
                                  className="btn btn-primary w-100"
                                  onClick={async () => {
                                    const res = await await finishVendorOtpVerification({ email: session.user.email, oneTimePassword: values.code });
                                    console.log("res", res.data);
                                    if (!res.data.ok) {
                                      toast.error(res.data.message);
                                    }
                                    if (res.data.ok) {
                                      toast.success("OTP verified!");
                                    }
                                  }}
                                  disabled={isSubmitting}
                                >
                                  Confirm
                                </button>
                              </div>
                            </div>
                          </Form>
                        )}
                      </Formik>
                    </div>
                  )}
                </div>
              </div>
            )}

            {isResult && (
              <div className="row">
                <div className="col-12">
                  <div className="result-box">
                    <p>
                      Gift card sent for approval, please wait till the vendor contacts you
                      <br /> Thank you.
                    </p>
                    <div>
                      <button className="btn btn-primary" type="button" onClick={()=>{
                        router.push("/listing")
                      }}>
                        Browse Experiences
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default GiftCard;