import Image from "next/image";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { useRouter } from "next/router";
import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";
import { useSelector } from "react-redux";
import StarRatings from "react-star-ratings";
import { postReviewEndUser } from "../../redux/actions/reviewsAction";
import { dateFormatFn } from "../../services/imageHandling";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay, Pagination } from "swiper/modules";
import { motion } from "framer-motion";
import "swiper/css";
import "swiper/css/pagination";

const GuestReviews = ({ activityById }) => {
  const [rating, setRating] = useState(0);
  const [comments, setcomments] = useState();
  const [readMoreText, setreadMoreText] = useState();
  const [showModal, setshowModal] = useState(false);
  const { endUser } = useSelector(state => state.endUser);
  const { reviews } = useSelector(state => state.reviews);

  const router = useRouter();
  console.log("reviews", reviews);
  const handleRatingChange = newRating => {
    setRating(newRating);
  };

  console.log("newRating", rating);

  return (
    <>
      <section className="guest-reviews-session">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <div className="row">
                <div className="col-12">
                  <div className="head-btn">
                    <div className="head01">
                      <div className="title">Guest reviews</div>
                    </div>
                    {/* <a href="" className="view-all-reviews-btn">
                      View All Reviews
                    </a> */}
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col-12">
                  <div className="product-reviews">
                    <span className="rating">8.8</span>
                    <span>Fabulous</span>
                    <span className="review">{` ${reviews.length} reviews`}</span>
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col-md-12">
                  <Swiper
                    // slidesPerView={2}
                    autoplay={{
                      delay: 9000,
                      disableOnInteraction: false
                    }}
                    autoHeight={true}
                    spaceBetween={10}
                    pagination={{
                      clickable: true
                    }}
                    // navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }}
                    breakpoints={{
                      640: {
                        slidesPerView: 1,
                        spaceBetween: 20,
                        autoplay: true
                      },
                      768: {
                        slidesPerView: 1,
                        spaceBetween: 40
                      },
                      1024: {
                        slidesPerView: 2,
                        spaceBetween: 40
                      }
                    }}
                    modules={[Navigation, Autoplay, Pagination]}
                    className="mySwiper-guestreview"
                  >
                    {reviews && reviews.length > 0 ? (
                      reviews.map(data => {
                        return (
                          <SwiperSlide>
                            <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                              <div className="guest-reviews-detail">
                                <div className="head">
                                  <div className="name">{data.attributes.endUser.data.attributes.name}</div>
                                  <div className="month">{dateFormatFn(data.attributes.createdAt)}</div>
                                </div>
                                <StarRatings
                                  className="col-3 mx-2"
                                  rating={data.attributes.rating}
                                  starRatedColor="#ffe20" // Set the rated color to yellow
                                  starHoverColor="#ffe20" // Set the hover color to yellow
                                  changeRating={() => { }}
                                  numberOfStars={5}
                                  name="rating"
                                  starDimension="20px" // Set star width and height
                                />
                                <div className="review-content">
                                  "{data.attributes.comments.length > 180 ? `${data.attributes.comments.slice(0, 180)}...` : data.attributes.comments}
                                  {data.attributes.comments.length > 180 && (
                                    <a
                                      onClick={() => {
                                        setreadMoreText(data);
                                        setshowModal(true);
                                      }}
                                    >
                                      Read More
                                    </a>
                                  )}
                                </div>
                                {/* View All */}
                              </div>
                            </motion.div>
                          </SwiperSlide>
                        );
                      })
                    ) : (
                      <div className="d-flex justify-content-center"><strong>No reviews available</strong></div>
                    )}
                  </Swiper>
                </div>
              </div>
              {endUser && (
                <div className="row">
                  <div className="head01">
                    <div className="title">Post a review:</div>
                  </div>
                  <div>
                    <label className=" mb-3 ">Rating: </label>{" "}
                    <StarRatings
                      className="col-3 mx-2"
                      rating={3}
                      starRatedColor="#000" // Set the rated color to yellow
                      starHoverColor="#ffe20" // Set the hover color to yellow
                      changeRating={handleRatingChange}
                      numberOfStars={5}
                      name="rating"
                      starDimension="20px" // Set star width and height
                    />
                  </div>
                  <div className="row">
                    <div className="col-md-6">
                      <textarea
                        // style={{ width: "50%" }}
                        rows={4}
                        className="p-2 w-100"
                        placeholder="Comments"
                        name="comments"
                        value={comments}
                        onChange={e => {
                          e.preventDefault();
                          // console.log(e.target.value);4
                          setcomments(e.target.value);
                          // setrejectionReasonText(e.target.value);
                        }}
                      />
                    </div>
                  </div>
                  <div className="view-all-btn my-3">
                    <Button
                      disabled={rating == 0 || comments == ""}
                      variant="primary"
                      onClick={async e => {
                        e.preventDefault();
                        const res = await postReviewEndUser({ endUserId: endUser.id, activityId: router.query.id, comments, rating });
                        console.log("res", res);
                        setRating(0);
                        setcomments("");
                      }}
                    >
                      Submit
                    </Button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
        {readMoreText && (
          <Modal
            className="guest-reviews-detail"
            centered
            show={showModal}
            onHide={() => {
              setshowModal();
              setreadMoreText(null);
            }}
          >
            <Modal.Header closeButton>
              <div className="head">
                <div className="name">Review from {readMoreText.attributes.endUser.data.attributes.name}</div>
              </div>
            </Modal.Header>
            <Modal.Body>
              <div>{readMoreText.attributes.comments}</div>
            </Modal.Body>
          </Modal>
        )}
      </section>
    </>
  );
};

export default GuestReviews;