import React, { useEffect } from "react";
import "./Customer_Feedbacks_cards.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
import {
  faAngleLeft,
  faAngleRight,
  faStar as fasStar,
} from "@fortawesome/free-solid-svg-icons";
import Rating from "react-rating";
import { useDispatch, useSelector } from "react-redux";

function Customer_Feedbacks_cards({
  nameText,
  imgSrc,
  dateText,
  productName,
  boldText,
  rating,
  images,
}) {
  const product = useSelector((state) => state.product.product);

  // console.log(product?.image," product product")

  const [showModal, setShowModal] = React.useState(false);
  const [activeIndex, setActiveIndex] = React.useState(0);

  const nextImage = () => {
    setActiveIndex((prev) => (prev + 1) % images.length);
  };

  const prevImage = () => {
    setActiveIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
  };

  const openModal = (index) => {
    setActiveIndex(index);
    setShowModal(true);
  };

  return (
    <>
      <section className="Customer_Feedbacks_cards">
        <div className="content_holder">
          <div className="profile_holder">
            <div>
              <div className="img_holder">
                <img
                  src={process.env.NEXT_PUBLIC_IMG_URL + product?.image}
                  className="user_img"
                  alt="user_img"
                />
              </div>
            </div>
            <div className="text_holder">
              <h6>{nameText}</h6>
              <Rating
                className="rating_icon"
                initialRating={rating}
                readonly
                emptySymbol={<FontAwesomeIcon icon={farStar} color="#ccc" />}
                fullSymbol={<FontAwesomeIcon icon={fasStar} color="#428bcf" />}
                fractions={2}
              />
            </div>

            <div className="text_holder">
              {images?.length > 0 && (
                <div
                  className="feedback_img_wrapper"
                  onClick={() => openModal(0)}
                >
                  <img
                    src={process.env.NEXT_PUBLIC_IMG_URL + images[0]?.image}
                    className="feedbackimg"
                    alt="feedbackimg"
                  />

                  {images.length > 1 && (
                    <div className="image_overlay">+{images.length - 1}</div>
                  )}
                </div>
              )}
            </div>
          </div>

          <div className="date_holder">
            <h5>{dateText}</h5>
          </div>
        </div>

        {showModal && (
          <div className="image_modal_overlay">
            <div className="image_modal">
              <button className="close_btn" onClick={() => setShowModal(false)}>
                ✕
              </button>

              <button className="prev_btn" onClick={prevImage}>
                <FontAwesomeIcon icon={faAngleLeft} />
              </button>

              <img
                src={
                  process.env.NEXT_PUBLIC_IMG_URL + images[activeIndex]?.image
                }
                className="modal_image"
                alt="preview"
              />

              <button className="next_btn" onClick={nextImage}>
                <FontAwesomeIcon icon={faAngleRight} />
              </button>

              <div className="image_counter">
                {activeIndex + 1} / {images.length}
              </div>
            </div>
          </div>
        )}

        <div className="product_name">
          <p>
            {productName} : <b>{boldText}</b>
          </p>
        </div>
      </section>
    </>
  );
}

export default Customer_Feedbacks_cards;
