import React, { useEffect } from "react";
import "./Product_Rating.css";
import Average_Rating from "./average_Rating/Average_Rating";
import Submit_Your_Review from "./submit_Your_Review/Submit_Your_Review";
import Customer_Feedbacks from "./customer_Feedbacks/Customer_Feedbacks";
import {
  allReviewRating,
  AvgReviewRating,
} from "../../../features/review_rating/review_ratingSlice";
import { useDispatch, useSelector } from "react-redux";

function Product_Rating({ product }) {
  const dispatch = useDispatch();
  const avg_rating = useSelector((state) => state.reviewRating.avg_rating);
  useEffect(() => {
    dispatch(
      AvgReviewRating({
        product_id: product.id,
      }),
    );
  }, [dispatch, product]);

  const all_rating = useSelector((state) => state.reviewRating.all_rating);
  useEffect(() => {
    dispatch(
      allReviewRating({
        product_id: product.id,
      }),
    );
  }, [dispatch, product]);

  return (
    <>
      <section className="Product_Rating">
        <div className="container">
          <div className="Product_Rating_container">
            <div className="row">
              <div className="col-lg-3 col-md-5">
                <Average_Rating product={product} avg_rating={avg_rating} />
              </div>

              <div className="col-lg-9 col-md-7">
                <Submit_Your_Review product={product} />
              </div>
              <div className="col-md-12">
                {all_rating && all_rating?.data?.length > 0 ? (
                  <Customer_Feedbacks
                    product={product}
                    all_rating={all_rating}
                  />
                ) : (
                  <div className="text-center py-4 theme_bg_primary_colour">
                    <h6 className="text-secodary title-head mb-0">
                      No customer reviews yet for this product.
                    </h6>
                    {/* <p className="text-muted small mt-1">
                      Be the first to share your feedback!
                    </p> */}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Product_Rating;
