import React from "react";
import "./Order_details_table.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
import { Table, Form } from "react-bootstrap";

function Return_Order_details_table({
  order,
  selectedItems,
  setSelectedItems,
  setError,
  setProductId,
  setShowReviewRating,
  showReviewRating,
}) {
  const handleCheckboxChange = (val) => {
    setError("");
    setSelectedItems((prev) => {
      const exists = prev.some((item) => item.id === val.id);
      if (exists) {
        return prev.filter((item) => item.id !== val.id);
      } else {
        return [...prev, val];
      }
    });
  };

  const handleOpenReview = async (productDetail) => {
    await setProductId(productDetail?.product_id);
    await setShowReviewRating(true);
  };
  return (
    <>
      <section className="Order_details_table Cart_Products_card d-none d-lg-block">
        <div className="inner_box_div">
          {/* <Table className="">
            <tbody> */}
              {order?.Return_Order_Details?.map((val) => (
                <div className="row align-items-center inner_card">
                  <div className="col-sm-8 ">
                    <div className="row">
                      <div className="col-xl-3 col-lg-3 col-md-3 col-3">
                        <div className="img_holder">
                          <img
                            className="Product_img"
                            src={
                              process.env.NEXT_PUBLIC_IMG_URL +
                              val?.Product_Order_Detail?.Product?.image
                            }
                          />
                        </div>
                      </div>
                      <div className=" col-xl-9 col-lg-9 col-md-9 col-9">
                        <div className="info_text_holder">
                          <div>
                            <h4>{val?.Product_Order_Detail?.Product?.name}</h4>

                            <h6>
                              Size:{" "}
                              <span>
                                {
                                  val?.Product_Order_Detail?.Product_Variant
                                    ?.name
                                }
                              </span>
                            </h6>
                          </div>
                        </div>
                      </div>
                      {val?.Product_Order_Detail?.Product?.Rating_Reviews ===
                        null && (
                        <div className="mt-2">
                          <button
                            className="btn btn-success btn-sm"
                            onClick={() => handleOpenReview(val)}
                          >
                            Review & Rating
                          </button>
                        </div>
                      )}
                    </div>
                  </div>

                  <div  className="col-sm-4">
                    <div className="new_price_holder">
                      <p className="price_inner_text">
                        <span className="right_label">Current Price : </span>₹
                        {val?.Product_Order_Detail?.selling_price}
                      </p>

                      <p className="price_inner_text">
                        <span className="right_label">Order Qty : </span>
                        {val?.Product_Order_Detail?.quantity}
                      </p>

                      <p className="price_inner_text">
                        <span className="right_label">Total Price : </span>₹
                        {val?.Product_Order_Detail?.quantity *
                          val?.Product_Order_Detail?.selling_price}
                      </p>
                    </div>

                    {/* <div className="Quantity_tr_holder">
                      <div className="price_holder">
                        <p className="mb-0" style={{ color: "#000" }}>
                          {val?.Product_Order_Detail?.quantity} * ₹
                          {val?.Product_Order_Detail?.selling_price}
                        </p>
                      </div>
                    </div>
                    <div className="Quantity_tr_holder">
                      <div className="price_holder">
                        <p className="mb-0">
                          {" "}
                          Total: ₹{" "}
                          {val?.Product_Order_Detail?.quantity *
                            val?.Product_Order_Detail?.selling_price}
                        </p>
                      </div>
                    </div> */}
                  </div>
                </div>
              ))}

              {/* <tr >
                <td>
                  <div className="row">
                    <div className="col-xl-2 col-lg-3 col-md-3 col-3">
                      <div className="img_holder">
                        <img
                          className="Product_img"
                          src={
                            process.env.PUBLIC_URL +
                            "/assets/images/product/ghee.png"
                          }
                          alt={"Product_img"}
                        />
                      </div>
                    </div>
                    <div className=" col-xl-10 col-lg-9 col-md-9 col-9">
                      <div className="info_text_holder">
                        <div>
                          <h4>
                            Bilona Cow Ghee – Made from A2 Milk of Desi Cows
                          </h4>

                          <h6>
                            Size: <span>1L</span>
                          </h6>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>

                <td>
                  <div className="Quantity_tr_holder">
                    <div className="price_holder">
                      <p className="mb-0">
                        <span>X 1</span> ₹400
                      </p>

                    </div>


                  </div>
                </td>
              </tr>

               <tr >
                <td>
                  <div className="row">
                    <div className="col-xl-2 col-lg-3 col-md-3 col-3">
                      <div className="img_holder">
                        <img
                          className="Product_img"
                          src={
                            process.env.PUBLIC_URL +
                            "/assets/images/product/ghee.png"
                          }
                          alt={"Product_img"}
                        />
                      </div>
                    </div>
                    <div className=" col-xl-10 col-lg-9 col-md-9 col-9">
                      <div className="info_text_holder">
                        <div>
                          <h4>
                            Bilona Cow Ghee – Made from A2 Milk of Desi Cows
                          </h4>

                          <h6>
                            Size: <span>1L</span>
                          </h6>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>

                <td>
                  <div className="Quantity_tr_holder">
                    <div className="price_holder">
                      <p className="mb-0">
                        <span>X 1</span> ₹400
                      </p>

                    </div>


                  </div>
                </td>
              </tr>

              <tr >
                <td>
                  <div className="row">
                    <div className="col-xl-2 col-lg-3 col-md-3 col-3">
                      <div className="img_holder">
                        <img
                          className="Product_img"
                          src={
                            process.env.PUBLIC_URL +
                            "/assets/images/product/ghee.png"
                          }
                          alt={"Product_img"}
                        />
                      </div>
                    </div>
                    <div className=" col-xl-10 col-lg-9 col-md-9 col-9">
                      <div className="info_text_holder">
                        <div>
                          <h4>
                            Bilona Cow Ghee – Made from A2 Milk of Desi Cows
                          </h4>

                          <h6>
                            Size: <span>1L</span>
                          </h6>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>

                <td>
                  <div className="Quantity_tr_holder">
                    <div className="price_holder">
                      <p className="mb-0">
                        <span>X 1</span> ₹400
                      </p>

                    </div>


                  </div>
                </td>
              </tr> */}
            {/* </tbody>
          </Table> */}
        </div>
      </section>
    </>
  );
}

export default Return_Order_details_table;
