import { Formik } from "formik";
import { Fragment, useState } from "react";
import { Button, Form, Modal } from "react-bootstrap";
import { useDispatch } from "react-redux";
import ReactSelect from "react-select";
import * as Yup from "yup";
import { updateApprovalStatusAdmin } from "../../redux/actions/userActions";
import { getAllVendors } from "../../redux/actions/vendorActions";

const RejectModal = ({ show, handleClose, detail, setShowDetail }) => {
  const dispatch = useDispatch();
  console.log("detail", detail[0].attributes.email);
  const formValidationSchema = Yup.object().shape({
    email: Yup.string(),
    reason: Yup.string().required("Reason is Required"),
    comments: Yup.string()
  });

  const reasonOptions = [{ value: "Not listed", label: "Not listed" }];
  const [selectedOption, setSelectedOption] = useState(null);
  const [showComments, setshowComments] = useState(false);

  return (
    <Fragment>
      <Modal show={show} onHide={handleClose} aria-labelledby="contained-modal-title-vcenter" centered>
        <Modal.Body>
          <div className="row">
            <div className="col-12 col-lg-12">
              <div className="px-3">
                <p className="mphead">Reject reason</p>
                <div className="form-container">
                  <Formik
                    initialValues={{
                      email: detail[0].attributes.email,
                      reason: "",
                      comments: ""
                    }}
                    validationSchema={formValidationSchema}
                    onSubmit={async values => {
                      console.log("values", values);
                      let data;
                      if (showComments) {
                        data = {
                          email: values.email,
                          rejectionReason: values.comments
                        };
                      } else {
                        data = {
                          email: values.email,
                          rejectionReason: values.reason
                        };
                      }
                      console.log(data);

                      let response = await updateApprovalStatusAdmin({ status: "rejected", userId: detail[0].attributes.user.data.id, rejectionReason: data.rejectionReason });
                      console.log(response.data);
                      await dispatch(getAllVendors());
                      handleClose()
                      setShowDetail(false);
                    }}
                  >
                    {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
                      <Form
                        onSubmit={e => {
                          e.preventDefault();
                          handleSubmit();
                        }}
                      >
                        {/* {console.log("formik.values",values)} */}
                        <div className="input-group">
                          <label>Email Id</label>
                          <input
                            disabled={true}
                            type="text"
                            name="email"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.email}
                            placeholder="yourname@example.com"
                            style={{ backgroundColor: "#EBEBEB", boxShadow: "1.63px 3.26px 4.07px 0px #FFFFFF40 inset", border: "none" }}
                          />
                          {errors.email && touched.email && <span className="form-error">{errors.email}</span>}
                        </div>
                        <div className="input-group mb-1">
                          <label>Reason</label>
                          <select
                            name="reason"
                            onChange={e => {
                              console.log(e);
                              handleChange(e);
                              if (e.target.value == "notListed") {
                                setshowComments(true);
                              } else {
                                setshowComments(false);
                              }
                            }}
                            onBlur={handleBlur}
                            value={values.reason}
                          >
                            <option value="">Select</option>
                            <option value="Invalid address details">Invalid address details</option>
                            <option value="Invalid business details">Invalid business details</option>
                            <option value="Bogus PAN number">Bogus PAN number</option>
                            <option value="notListed">Not listed</option>
                          </select>
                          {errors.reason && touched.reason && <span className="form-error">{errors.reason}</span>}
                        </div>
                        {showComments && (
                          <div className="input-group">
                            <textarea rows={4} placeholder="Leave your comments here..." name="comments" onChange={handleChange} onBlur={handleBlur} value={values.comments} />
                            {errors.comments && touched.comments && <span className="form-error">{errors.comments}</span>}
                          </div>
                        )}

                        <div className="my-4">
                          <div className="d-flex justify-content-center">
                            <Button type="submit" variant="" className="btnAdd btnApprove m-0" disabled={values.comments == "" && showComments}>
                              Submit
                            </Button>
                            <div className="px-1"></div>
                            <Button type="button" variant="" className="btnAdd btnReject m-0" onClick={handleClose}>
                              Cancel
                            </Button>
                          </div>
                        </div>
                      </Form>
                    )}
                  </Formik>
                </div>
              </div>
            </div>
          </div>
        </Modal.Body>
      </Modal>
    </Fragment>
  );
};
export default RejectModal;