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";
import UploadImageCustom from "./UploadImageCustom";

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();
  const [brandLogo, setbrandLogo] = 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"),
    einNumber: Yup.string().required("EIN Number 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,
      einNumber: vendorDetails.attributes.einNumber,
      // 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,
    };
  }

  console.log("vendorDetails", vendorDetails);
  useEffect(() => {
    setbrandLogo(vendorDetails?.attributes.brandLogo.data?.id)
  }, [])

  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>
      <div className="w-100">
        {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 : "",

                        businessName: vendorData?.businessName ? vendorData?.businessName : "",
                        einNumber: vendorData?.einNumber ? vendorData?.einNumber : "",
                        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,
                          businessName: values.businessName,
                          einNumber: values.einNumber,
                          state: values.state,
                          city: values.city,
                          pincode: values.pincode,
                          country: values.country,
                          addressLine1: values.addressLine1,
                          addressLine2: values.addressLine2,
                          brandLogo: brandLogo
                        };
                        // 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>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 col-lg-5">
                                <div className="input-group">
                                  <label>EIN Number</label>
                                  <input disabled={disableFields} type="text" name="einNumber" onChange={handleChange} onBlur={handleBlur} value={values.einNumber} />
                                  {errors.einNumber && touched.einNumber && <span className="form-error">{errors.einNumber}</span>}
                                </div>
                              </div>
                              <div className="col-12  col-lg-5">
                                <div className="input-group align-items-center">
                                  <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> */}
                                  <UploadImageCustom disabled={disableFields} setImage={setbrandLogo} isPdf={false} populatedImages={vendorDetails?.attributes.brandLogo} />
                                  <p className="textS pe-5 pt-2">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 className="number">+1 (407) 8798 789</p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </Fragment>
  );
};

export default BusinessDetails;