import { Formik } from "formik";
import { Fragment, useEffect, useRef, useState } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { FaArrowRight, FaTimes } from "react-icons/fa";
import Image from "next/image";
import { getSession } from "next-auth/react";
import "react-bootstrap-typeahead/css/Typeahead.css";
import { useDispatch } from "react-redux";
import { getLoggedInVendor } from "../../redux/actions/vendorActions";

const BusinessDetails = () => {
  const [session, setSession] = useState(null);
  const dispatch = useDispatch()
  //   const [pincodeData, setPinCodeData] = useState()
  //   const ref = useRef(null);

  useEffect(() => {
    const fetchSession = async () => {
      setSession(await getSession());
    };
    fetchSession();
  }, []);
  console.log("session", session);
  const businessDetailsValidationSchema = Yup.object().shape({
    panNumber: Yup.string().required("Pan Number is Required"),
    panFile: Yup.mixed().required("Pan Image is Required"),
    gstNumber: Yup.string().required("GST Number is Required"),
    gstCertificateFile: Yup.mixed().required("GST Certificate is Required"),
    businessName: Yup.string().required("Business Name is Required"),
    brandLogoFile: Yup.mixed().required("Brand Logo is Required"),
    pincode: Yup.string().required("Pincode is Required"),
    country: Yup.string().required("Country is Required"),
    state: Yup.string().required("State is Required"),
    city: Yup.string().required("City is Required"),
    addressLine1: Yup.string().required("Address Line 1 is Required"),
    addressLine2: Yup.string().required("Address Line 2 is Required")
  });

  //   const handleSearch = async pin => {
  //     let pincodeDataSet = await pincodeSearchByFilter(pin);
  //     console.log("pincodeData", pincodeDataSet.data.data);
  //     setPinCodeData(pincodeDataSet.data.data)
  //   };
  return (
    <Fragment>
      <div className="container p-5">
        <div className="row">
          <div className="col-12 col-lg-8">
            <div className="content-div business-details">
              <h2>Tell us about your business</h2>
              <p>Please have the following ready before you begin</p>
              <p>
                <FaArrowRight /> Your bank account details for receiving payments from ZanGO
              </p>
              <p className="mb-4">
                <FaArrowRight /> Tax (GST/PAN) details of your business.
              </p>
              <hr />
              <div className="form-container mt-4">
                <Formik
                  initialValues={{
                    panNumber: "",
                    panFile: "",
                    gstNumber: "",
                    gstCertificateFile: "",
                    businessName: "",
                    brandLogoFile: "",
                    pincode: "",
                    country: "",
                    state: "",
                    city: "",
                    addressLine1: "",
                    addressLine2: ""
                  }}
                  validationSchema={businessDetailsValidationSchema}
                  // enableReinitialize={true}
                  onSubmit={async values => {
                    console.log("business details values", values);
                    const businessDetails = {
                      pan: values.panNumber,
                      gst: values.gstNumber,
                      businessName: values.businessName,
                      state: values.state,
                      city: values.city,
                      pincode: values.pincode,
                      country: values.country
                    };
                    // await dispatch(updateVendorBusinessDetails({businessDetails, }))

                    dispatch(getLoggedInVendor())
                  }}
                >
                  {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
                    <Form
                      onSubmit={e => {
                        e.preventDefault();
                        handleSubmit();
                      }}
                    >
                      <h4>Vendor Business Information</h4>
                      <div className="mt-3">
                        <p className="textH">Business documents</p>
                        <div className="row">
                          <div className="col-12 col-lg-5">
                            <div className="input-group">
                              <label>Enter Business PAN No.</label>
                              <input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} />
                              {errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>}
                            </div>
                          </div>
                          <div className="col-12 offset-lg-1 col-lg-5">
                            <div className="input-group">
                              <label>Upload PAN</label>
                              <div className="custom-file">
                                <input
                                  type="file"
                                  className="custom-file-input"
                                  id="panFile"
                                  name="panFile"
                                  onChange={event => {
                                    if (event) {
                                      const file = event.currentTarget.files[0];
                                      setFieldValue("panFile", file);
                                    }
                                  }}
                                  onBlur={handleBlur}
                                  // value={values.panFile}
                                  onClick={event => {
                                    const { target = {} } = event || {};
                                    target.value = "";
                                  }}
                                />
                                <label className="custom-file-label" htmlFor="panFile">
                                  Upload
                                </label>
                              </div>
                              <p className="textS">Upload in .PNG or .JPG/JPEG format</p>
                              {errors.panFile && touched.panFile && <span className="form-error">{errors.panFile}</span>}
                              {values.panFile && (
                                <div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
                                  <p className="textS m-0">{values.panFile.name}</p>
                                  <FaTimes
                                    style={{ cursor: "pointer" }}
                                    onClick={() => {
                                      setFieldValue("panFile", "");
                                    }}
                                  />
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                        <div className="row">
                          <div className="col-12 col-lg-5">
                            <div className="input-group">
                              <label>GST Number</label>
                              <input type="text" name="gstNumber" onChange={handleChange} onBlur={handleBlur} value={values.gstNumber} />
                              {errors.gstNumber && touched.gstNumber && <span className="form-error">{errors.gstNumber}</span>}
                            </div>
                          </div>
                          <div className="col-12 offset-lg-1 col-lg-5">
                            <div className="input-group">
                              <label>GST Certificate</label>
                              <div className="custom-file">
                                <input
                                  type="file"
                                  className="custom-file-input"
                                  id="gstCertificateFile"
                                  name="gstCertificateFile"
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.gstCertificateFile}
                                />
                                <label className="custom-file-label" htmlFor="gstCertificateFile">
                                  Upload
                                </label>
                              </div>
                              <p className="textS">Upload in .PNG or .JPG/JPEG format</p>
                              {errors.gstCertificateFile && touched.gstCertificateFile && <span className="form-error">{errors.gstCertificateFile}</span>}
                            </div>
                          </div>
                        </div>
                        <div className="row">
                          <div className="col-12 col-lg-5">
                            <div className="input-group">
                              <label>Business Name</label>
                              <input type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} />
                              {errors.businessName && touched.businessName && <span className="form-error">{errors.businessName}</span>}
                            </div>
                          </div>
                          <div className="col-12 offset-lg-1 col-lg-5">
                            <div className="input-group">
                              <label>Brand Logo</label>
                              <div className="custom-file">
                                <input
                                  type="file"
                                  className="custom-file-input"
                                  id="brandLogoFile"
                                  name="brandLogoFile"
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.brandLogoFile}
                                />
                                <label className="custom-file-label" htmlFor="brandLogoFile">
                                  Upload
                                </label>
                              </div>
                              <p className="textS">Upload in .PNG or .JPG/JPEG format</p>
                              {errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
                            </div>
                          </div>
                        </div>
                      </div>
                      <hr />
                      <div className="mt-4">
                        <p className="textH">Business Address</p>
                        <div className="row">
                          <div className="col-12 col-lg-5">
                            <div className="input-group">
                              <label>Pincode</label>
                              {/* <AsyncTypeahead
                                onSearch={handleSearch}
                                minLength={3}
                                value={values.pincode}
                                id="basic-behaviors-example"
                                labelKey="name"
                                options={pincodeData && pincodeData.length>0 && pincodeData.map(item=>{
                                    return {name: item.attributes.name, id: item.id}
                                })}
                                placeholder="Choose a state..."
                                ref={ref}
                                onBlur={() => {
                                  console.log(ref.current);
                                  if (!ref.current.state.selected.length > 0) {
                                    ref.current?.clear();
                                  }
                                }}
                                onChange={(e) => {
                                  console.log("input change", e);
                                }}
                              /> */}
                              <input type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} />
                              {errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>}
                            </div>
                          </div>
                          <div className="col-12 offset-lg-1 col-lg-5">
                            <div className="input-group">
                              <label>Country</label>
                              <input type="text" name="country" onChange={handleChange} onBlur={handleBlur} value={values.country} />
                              {errors.country && touched.country && <span className="form-error">{errors.country}</span>}
                            </div>
                          </div>
                        </div>
                        <div className="row">
                          <div className="col-12 col-lg-5">
                            <div className="input-group">
                              <label>State</label>
                              <input type="text" name="state" onChange={handleChange} onBlur={handleBlur} value={values.state} />
                              {errors.state && touched.state && <span className="form-error">{errors.state}</span>}
                            </div>
                          </div>
                          <div className="col-12 offset-lg-1 col-lg-5">
                            <div className="input-group">
                              <label>City</label>
                              <input type="text" name="city" onChange={handleChange} onBlur={handleBlur} value={values.city} />
                              {errors.city && touched.city && <span className="form-error">{errors.city}</span>}
                            </div>
                          </div>
                        </div>
                        <div className="row">
                          <div className="col-12 col-lg-5">
                            <div className="input-group">
                              <label>Address Line 1</label>
                              <input type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} />
                              {errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</span>}
                            </div>
                          </div>
                          <div className="col-12 offset-lg-1 col-lg-5">
                            <div className="input-group">
                              <label>Address Line 2</label>
                              <input type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
                              {errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="row mt-3 mb-1">
                        <div className="col-12 col-lg-5">
                          <div className="input-group">
                            <Button type="submit" className="btn btn-primary btn-submit">
                              Send for Approval
                            </Button>
                          </div>
                        </div>
                      </div>
                    </Form>
                  )}
                </Formik>
              </div>
            </div>
          </div>
          <div className="col-12 col-lg-4">
            <div className="content-div help-center">
              <h2>Help Center</h2>
              <ul className="helplist">
                <li>
                  <Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
                  <p>Lorem Ipsum Dolor Sit?</p>
                </li>
                <li>
                  <Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
                  <p>Lorem Ipsum Dolor Sit?</p>
                </li>
                <li>
                  <Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
                  <p>Lorem Ipsum Dolor Sit?</p>
                </li>
                <li>
                  <Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
                  <p>Lorem Ipsum Dolor Sit?</p>
                </li>
                <li>
                  <Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
                  <p>+1 (407) 8798 789</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default BusinessDetails;