import { Empty } from "antd";
import React, { useEffect, useState } from "react";
import { Accordion, Button, Modal } from "react-bootstrap";
import { Loader } from "react-bootstrap-typeahead";
import { FaAngleLeft } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
import { toast } from "react-toastify";
// import { getActivitiesByFilters } from "../../redux/actions/activityAction";
import { deleteReview, getReviewsAction } from "../../redux/actions/reviewsAction";

const ReviewsListing = ({ activityId, setshowReviews, isVendor }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getReviewsAction({ activityId }));
  }, []);
  const [showModal, setshowModal] = useState(false);
  const [reviewId, setreviewId] = useState();
  const { reviews, loading } = useSelector(state => state.reviews);
  console.log("reviews", reviews, loading);
  return (
    <div className="review-details">
      <div className="col-12 col-lg-12">
        <div className="d-flex align-items-center justify-content-between">
          <div className="backDiv">
            <span
              className="backArrow"
              onClick={() => {
                setshowReviews(false);
              }}
            >
              <FaAngleLeft />
            </span>
            <span>Reviews: </span>
          </div>
        </div>
      </div>
      <div className="container  mt-5">
        {reviews && !reviews.length > 0 && <Empty />}
        {!loading ? (
          <Accordion className="accordion-filter accordion-01" defaultActiveKey="0" flush>
            {reviews &&
              reviews.map(item => {
                return (
                  <Accordion.Item key={item.id} eventKey={item.id}>
                    <Accordion.Header>
                      <div>
                        <span>{`${item.attributes.comments.slice(0, 80).trim()}...`}</span> <span className="">{`by ${item.attributes.endUser.data.attributes.email}`}</span>
                      </div>
                    </Accordion.Header>
                    <Accordion.Body>
                      <div className="m-1">Rating: {item.attributes.rating}</div>
                      <div className="m-1">Review: {item.attributes.comments}</div>
                      {!isVendor && (
                        <div>
                          <Button
                            className="btnAdd btnReject m-0"
                            onClick={() => {
                              setshowModal(true);
                              setreviewId(item.id);
                            }}
                          >
                            Delete review
                          </Button>
                        </div>
                      )}
                    </Accordion.Body>
                  </Accordion.Item>
                );
              })}
          </Accordion>
        ) : (
          <Loader />
        )}
        <Modal
          show={showModal}
          onHide={() => {
            setshowModal(false);
            setreviewId();
          }}
          centered
        >
          <Modal.Header closeButton>Are you sure you want to delete this review?</Modal.Header>
          <Modal.Body>
            <div className="row">
              <Button
                className="btnAdd btnApprove m-0"
                onClick={async () => {
                  const res = await deleteReview({ reviewId });
                  dispatch(getReviewsAction({ activityId }));
                  // dispatch(getActivitiesByFilters({}));
                  toast.success("Review deleted");
                  setshowModal(false);
                  // console.log(res);
                }}
              >
                Yes
              </Button>
              <Button
                className="btnAdd btnReject m-0"
                onClick={() => {
                  setshowModal(false);
                  setreviewId();
                }}
              >
                Cancel
              </Button>
            </div>
          </Modal.Body>
        </Modal>
      </div>
    </div>
  );
};

export default ReviewsListing;