import Image from "next/image";
import { Fragment, useState } from "react";
import { Button, Modal } from "react-bootstrap";
import { Loader } from "react-bootstrap-typeahead";
import { toast } from "react-toastify";
import { updateActivityStatusAdmin } from "../../redux/actions/userActions";

const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
  const [viewDesc, setViewDesc] = useState();
  const [rejectPopUp, setrejectPopUp] = useState(false);
  const [rejectionReasonText, setrejectionReasonText] = useState("");

  console.log("activityDetailInfo", activityDetailInfo);
  return (
    <Fragment>
      <Modal show={show} onHide={handleClose} size="xl" aria-labelledby="contained-modal-title-vcenter" centered>
        <Modal.Body>
          {activityDetailInfo[0] ? (
            <div className="vendorDetails">
              <div className="row">
                <div className="col-12 col-lg-12">
                  <div className="d-flex align-items-center justify-content-between mb-4">
                    <h4 className="mb-0">Activity Details</h4>
                    <span className="image-container" style={{ cursor: "pointer" }} onClick={handleClose}>
                      <Image width={13} height={13} alt="" src="/images/admin/icon-close.svg" className="image" />
                    </span>
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col-12 col-lg-4 borderRight">
                  <p className="phead">Basic Details</p>
                  <div className="row">
                    <p className="col-12 col-lg-6">Category</p>
                    <p className="col-12 col-lg-6">*FEATURE TO BE ADDED*</p>
                  </div>
                  <div className="row">
                    <p className="col-12 col-lg-6">SubCategory</p>
                    <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.subCategory.data.attributes.name}</p>
                  </div>
                  <div className="row">
                    <p className="col-12 col-lg-6">Activity Name</p>
                    <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.name}</p>
                  </div>
                  <div className="row">
                    <p className="col-12 col-lg-6">Activity Description</p>
                    <p
                      className="col-12 col-lg-6 pview"
                      onClick={() => {
                        setViewDesc(true);
                      }}
                    >
                      View
                    </p>
                  </div>
                  <div className="row">
                    <p className="col-12 col-lg-6">Location</p>
                    <p className="col-12 col-lg-6">---|---</p>
                  </div>
                  <div className="row">
                    <p className="col-12 col-lg-6">Address</p>
                    <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.address}</p>
                  </div>
                  {/* <div className="row">
                    <p className="col-12 col-lg-6">Activity Name</p>
                    <p className="col-12 col-lg-6">Edge City Climb</p>
                  </div> */}
                  <div className="row">
                    <p className="col-12 col-lg-6">Price (per person)</p>
                    <p className="col-12 col-lg-6">$ {activityDetailInfo[0].attributes.pricePerPerson}</p>
                  </div>
                  <div className="row">
                    <p className="col-12 col-lg-6">Tags</p>
                    <p className="col-12 col-lg-6"></p>
                  </div>
                  <div className="row">
                    <p className="col-12 col-lg-6">Place</p>
                    <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.activityType}</p>
                  </div>
                  <div className="row">
                    <p className="col-12 col-lg-6">Gifting to someone</p>
                    <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.giftSomeone ? "Allowed" : "Disallowed"}</p>
                  </div>
                </div>
                <div className="col-12 col-lg-4 borderRight ps-4">
                  <div>
                    <p className="phead">Group Information</p>
                    <div className="row">
                      <p className="col-12 col-lg-6">Contact Person for the activity</p>
                      <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.contactPersonForBooking}</p>
                    </div>
                    <div className="row">
                      <p className="col-12 col-lg-6">Size of the Group</p>
                      <p className="col-12 col-lg-6">
                        {activityDetailInfo[0].attributes.minGroupSize} - {activityDetailInfo[0].attributes.maxGroupSize}
                      </p>
                    </div>
                  </div>
                  <div>
                    <p className="phead">Availability</p>
                    {/* <div className="row">
                      <p className="col-12 col-lg-6">Months</p>
                      <p className="col-12 col-lg-6">February</p>
                    </div> */}
                    <div className="row">
                      <p className="col-12 col-lg-6">Time</p>
                      {activityDetailInfo[0].attributes.fromTime && activityDetailInfo[0].attributes.toTime && (
                        <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.fromTime - activityDetailInfo[0].attributes.toTime}</p>
                      )}
                    </div>
                    <div className="row">
                      <p className="col-12 col-lg-6">Duration</p>
                      <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.duration}</p>
                    </div>
                    <div className="row">
                      <p className="col-12 col-lg-6">Age Group</p>
                      <p className="col-12 col-lg-6">{activityDetailInfo[0].attributes.ageLowerLimit}+</p>
                    </div>
                  </div>
                </div>
                <div className="col-12 col-lg-4 ps-4">
                  <div>
                    <p className="phead">Booking & Activity Information</p>
                    <div className="row">
                      <p className="col-12 col-lg-6">Link of Booking</p>
                      <p className="col-12 col-lg-6 pview">{activityDetailInfo[0].attributes.link}</p>
                    </div>
                    <div className="row">
                      <p className="col-12 col-lg-6">Images of Activities</p>
                      <p className="col-12 col-lg-6 pview">View Images</p>
                    </div>
                    <div className="row">
                      <p className="col-12 col-lg-6">Brand Logo</p>
                      <p className="col-12 col-lg-6 pview">View Logo</p>
                    </div>
                  </div>
                  <div>
                    <p className="phead">Policy & Terms</p>
                    <div className="row">
                      <p className="col-12 col-lg-6">Cancellation Policy</p>
                      <p className="col-12 col-lg-6 pview">View</p>
                    </div>
                    <div className="row">
                      <p className="col-12 col-lg-6">Terms & Conditions</p>
                      <p className="col-12 col-lg-6 pview">View</p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col-12 col-lg-12">
                  <div className="d-flex justify-content-center">
                    <Button
                      variant=""
                      className="btnAdd btnApprove m-0"
                      onClick={async () => {
                        await updateActivityStatusAdmin({ status: "approved", activityId: activityDetailInfo[0].id, rejectionReason: "" });
                        toast.success("Activity approved.");
                      }}
                    >
                      Approve
                    </Button>
                    <div className="px-1"></div>
                    <Button
                      variant=""
                      className="btnAdd btnReject m-0"
                      onClick={async () => {
                        // setrejectionId()
                        setrejectPopUp(true);
                        // await updateActivityStatusAdmin({ status: false, activityId: activityDetailInfo[0].id, rejectionReason: "" });
                      }}
                    >
                      Reject
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="text-center my-5 p-5">
              <Loader />
            </div>
          )}
        </Modal.Body>
      </Modal>
      <Modal show={viewDesc} onHide={() => setViewDesc(false)}>
        <Modal.Header closeButton>Activity description</Modal.Header>
        <Modal.Body>{activityDetailInfo[0].attributes.description}</Modal.Body>
      </Modal>

      <Modal
        show={rejectPopUp}
        onHide={() => {
          //   setrejectionId(null);
          setrejectPopUp(false);
        }}
      >
        <Modal.Header closeButton>Please mention reason for rejecting the activity.</Modal.Header>
        <Modal.Body>
          <div className="input-group">
            <textarea
              style={{ width: "100%" }}
              rows={4}
              className="p-2"
              placeholder="Eg: Not appropriate for this age group."
              name="comments"
              onChange={e => {
                e.preventDefault();
                setrejectionReasonText(e.target.value);
              }}
            />
          </div>
          <div className="my-4">
            <div className="d-flex justify-content-center">
              <Button
                variant=""
                className="btnAdd btnApprove m-0"
                disabled={rejectionReasonText == ""}
                onClick={async () => {
                  await updateActivityStatusAdmin({ status: "rejected", activityId: activityDetailInfo[0].id, rejectionReason: rejectionReasonText });
                  //   setrejectionId(null);
                  setrejectPopUp(false);
                  toast.success("Activity rejected.");
                }}
              >
                Submit
              </Button>
            </div>
          </div>
        </Modal.Body>
      </Modal>
    </Fragment>
  );
};
export default ActivityDetailsModal;