import React, { useState, useEffect, useContext } from "react";
import { Form, Button, Spinner, Row, Col, Card } from "react-bootstrap";
// import CustomCard from "../../../ui/CustomCard/CustomCard";
import { Field, Formik } from "formik";
import * as yup from "yup";
import contactServices from "../../../services/ContactServices";
import FormSubmissionMessage from "./ContactSubmissionMessage";

function RejectContactReasonForm(props) {
  const [loading, setLoading] = useState(false);
  const initialValues = {
    reason: "",
  };

  const rejectReasonFormSchema = yup.object({
    reason: yup.string().required("Required"),
  });

  //Reject Form submission
  async function rejectContact(data) {
    // console.log("Inside Dashboard: rejectForm()...");
    setLoadingFormSubmission(true);
    contactServices
      .rejectContact(data)
      .then((res) => {
        console.log("rejectContact RES = ", res.data);
        if (res.data.status === "success") {
          console.log("Success in rejectContact =", res.data);
          //   setFormApprovalInfo(res.data?.data?.preview);
          setLoadingFormSubmission(false);
        }
      })
      .catch((error) => {
        setLoadingFormSubmission(false);
        // setFormApprovalInfo(null);
        console.log("Error in rejectContact = ", error);
      });
  }

  const onSubmit = async (values, { resetForm }) => {
    setLoading(true);
    console.log("Form Values :", values);

    let newValues = {
      ...values,
      submission_id: props.approvalId,
      action: props.action,
    };
    console.log("Calling rejectReasonForm...", newValues);
    contactServices
      .rejectContact(newValues)
      .then((res) => {
        console.log("rejectContact RES = ", res.data);
        if (res.data.status === "success") {
          console.log("Success in rejectContact =", res.data);
          //   setFormApprovalInfo(res.data?.data?.preview);
          setLoading(false);
          props.setIsRejected(true);
        }
      })
      .catch((error) => {
        setLoading(false);
        // setIsRejected()
        // setFormApprovalInfo(null);
        props.setIsRejected(false);
        console.log("Error in rejectContact = ", error);
      });
  };

  return (
    <>
      <div className="d-flex flex-column">
        <Formik
          initialValues={initialValues}
          validationSchema={rejectReasonFormSchema}
          onSubmit={onSubmit}
        >
          {(formik) => {
            return (
              <Form className="form_style" onSubmit={formik.handleSubmit}>
                <Form.Group className="form-group rounded_corners mb-4">
                  <Form.Label className="d-block font-14 text-start">
                    Reason to Reject
                  </Form.Label>
                  <div className="pt-0 pb-3 text-gray6 font-12 text-start">
                    Your reason to reject will help the submitter to improve and
                    submit again.
                  </div>

                  <Form.Control
                    as="textarea"
                    rows={3}
                    style={{
                      height: "auto",
                      resize: "auto",
                      // minHeight: "40px",
                      maxHeight: "100px",
                    }}
                    placeholder="Reason"
                    name="reason"
                    {...formik.getFieldProps("reason")}
                    autoComplete="off"
                  />
                  {formik.touched.reason && formik.errors.reason ? (
                    <p className="error-state-text text-start font-12 text-danger mb-0">
                      {formik.errors.reason}
                    </p>
                  ) : null}
                </Form.Group>

                <div className="btn-wrap d-grid">
                  <Button
                    type="submit"
                    className="btn btn-theme btn-lg btn-red"
                  >
                    {loading ? (
                      <>
                        <Spinner
                          as="span"
                          animation="border"
                          size="sm"
                          role="status"
                          aria-hidden="true"
                        />
                      </>
                    ) : (
                      "Submit"
                    )}
                  </Button>
                </div>
              </Form>
            );
          }}
        </Formik>
      </div>

      {/* <FormSubmissionMessage
        type={props.action}
        text=""
        subText="You have rejected the submission. We Have notified the submitter about the rejection."
      /> */}
    </>
  );
}

export default RejectContactReasonForm;