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, useSelector } from "react-redux";
import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions";
import { loadUser, updateUserApprovalStatus } from "../../redux/actions/userActions";
import { useRouter } from "next/router";

const BusinessDetails = () => {
  const [session, setSession] = useState(null);
  const dispatch = useDispatch();
  const router = useRouter();
  const { loggedInVendor } = useSelector(state => state.loggedInVendor);
  const { vendorDetails } = useSelector(state => state.vendorDetails);
  const { loadedUser, error } = useSelector(state => state.loadedUser);
  //   const [pincodeData, setPinCodeData] = useState()
  //   const ref = useRef(null);
  console.log("vendorDetails", vendorDetails);
  const [disableFields, setdisableFields] = useState();
  useEffect(() => {
    console.log("user", loadedUser);
    if (loadedUser) {
      if (loadedUser.approved == "approved" || loadedUser.approved == "rejected") {
        setdisableFields(false);
      } else if (loadedUser.approved == "pending") {
        setdisableFields(true);
      }
    }
  }, [loadedUser]);
  // console.log("userStatus", userStatus);
  useEffect(() => {
    const fetchSession = async () => {
      setSession(await getSession());
    };
    fetchSession();
    // dispatch(getLoggedInVendor());
  }, []);
  // console.log("session", loggedInVendor);
  const businessDetailsValidationSchema = Yup.object().shape({
    panNumber: Yup.string().required("Pan Number is Required"),
    panFile: Yup.mixed(),
    gstNumber: Yup.string().required("GST Number is Required"),
    gstCertificateFile: Yup.mixed(),
    businessName: Yup.string().required("Business Name is Required"),
    brandLogoFile: Yup.mixed(),
    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)
  //   };

  let vendorData;

  if (vendorDetails) {
    vendorData = {
      panNumber: vendorDetails.attributes.pan,
      panFile: vendorDetails.attributes.panImage,
      gstNumber: vendorDetails.attributes.gst,
      gstCertificateFile: vendorDetails.attributes.gstImage,
      businessName: vendorDetails.attributes.businessName,
      brandLogoFile: vendorDetails.attributes.logo,
      pincode: vendorDetails.attributes.pincode,
      country: vendorDetails.attributes.country,
      state: vendorDetails.attributes.state,
      city: vendorDetails.attributes.city,
      addressLine1: vendorDetails.attributes.addressLine1,
      addressLine2: vendorDetails.attributes.addressLine2
    };
  }

  const ApprovalStatus = () => {
    if (loadedUser) {
      switch (loadedUser.approved) {
        case "approved":
          return <></>;

        case "rejected":
          return (
            <>
              <div class="alert alert-danger" role="alert">
                Your profile has been rejected! Please contact the admin for more details!
              </div>
            </>
          );

        case "pending":
          return (
            <>
              <div class="alert alert-primary" role="alert">
                Your profile is under consideration, please wait till admin gives approval
              </div>
            </>
          );

        case "none":
          return <></>;

        default:
          break;
      }
    }
  };
  // vendorDetails && console.log("vendorData", vendorData, vendorDetails.length > 0);
  return (
    <Fragment>
      {loadedUser && (
        <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">
                  <ApprovalStatus />
                  <Formik
                    enableReinitialize
                    initialValues={{
                      panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
                      panFile: vendorData?.panImage ? vendorData?.panImage : "",
                      gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
                      gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
                      businessName: vendorData?.businessName ? vendorData?.businessName : "",
                      brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
                      pincode: vendorData?.pincode ? vendorData?.pincode : "",
                      country: vendorData?.country ? vendorData?.country : "",
                      state: vendorData?.state ? vendorData?.state : "",
                      city: vendorData?.city ? vendorData?.city : "",
                      addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "",
                      addressLine2: vendorData?.addressLine2 ? vendorData?.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,
                        addressLine1: values.addressLine1,
                        addressLine2: values.addressLine2
                      };
                      // await dispatch(updateVendorBusinessDetails({businessDetails, }))

                      const response = await dispatch(getLoggedInVendor());

                      console.log("loggedInVendorReducer", response);

                      const updateBusinessDetails = await dispatch(updateVendorBusinessDetails({ businessDetails, vendorId: response.id }));
                      await updateUserApprovalStatus({ status: "pending" });
                      await dispatch(loadUser());
                      router.push("/vendor/dashboard");
                      // console.log("updateBusinessDetails", updateBusinessDetails);
                    }}
                  >
                    {({ 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} disabled={disableFields} />
                                {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
                                    disabled={disableFields}
                                    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 disabled={disableFields} 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
                                    disabled={disableFields}
                                    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 disabled={disableFields} 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
                                    disabled={disableFields}
                                    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 disabled={disableFields} 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 disabled={disableFields} 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 disabled={disableFields} 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 disabled={disableFields} 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 disabled={disableFields} 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 disabled={disableFields} 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 disabled={disableFields} type="submit" className="btn btn-primary btn-submit">
                                Send for Approval
                              </Button>
                            </div>
                          </div>
                          <div className="col-12 col-lg-5">
                            <div className="input-group">
                              <Button disabled={false} onClick={()=> {
                                router.push("/vendor/dashboard")
                              }} className="btn btn-primary btn-submit">
                                Go to dashboard
                              </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;