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";
import Link from "next/link";

function Order_details_table_cancel({
  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?.Product_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-4 col-md-3 col-3">
                  <div className="img_holder">
                    <img
                      className="Product_img"
                      src={
                        process.env.NEXT_PUBLIC_IMG_URL + order?.Product?.image
                      }
                      alt={"Product_img"}
                    />
                  </div>
                </div>
                <div className=" col-xl-9 col-lg-8 col-md-9 col-9">
                  <div className="info_text_holder">
                    <div>
                      <h4>{order?.Product?.name}</h4>
                    </div>
                  </div>
                </div>
                {order?.Product?.Rating_Reviews === null && (
                  <div className="mt-2">
                    <button
                      className="btn btn-success btn-sm"
                      onClick={() => handleOpenReview(order)}
                    >
                      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>₹
                  {order?.selling_price}
                </p>

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

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

              {/* <div className="Quantity_tr_holder">
                    <div className="price_holder">
                      <p className="mb-0" style={{ color: "#000" }}>
                        {order?.quantity} * ₹{order?.selling_price}
                      </p>
                    </div>
                  </div>
                  <div className="Quantity_tr_holder">
                    <div className="price_holder">
                      <p className="mb-0">
                        {" "}
                        Total: ₹ {order?.quantity * order?.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>
      <div className="d-block d-lg-none mobile_view_holder">
        <div className="mobile_product_card">
          <Link
            href={`/product-details/${order?.Product?.id}`}
            className="mobile_card_link"
          >
            <div className="mobile_card_inner">
              <div className="mobile_img_holder">
                <img
                  className="mobile_product_img"
                  src={process.env.NEXT_PUBLIC_IMG_URL + order?.Product?.image}
                  alt={order?.Product?.name}
                />
              </div>

              <div className="mobile_content">
                <h6 className="mobile_product_name">{order?.Product?.name}</h6>

                <div className="variant_info">
                  {order?.Product_Variant?.name && (
                    <p>
                      <span>Size:</span> {order?.Product_Variant?.name}
                    </p>
                  )}
                </div>

                <div className="price_section">
                  <div className="price_row">
                    <span>Price</span>
                    <strong>₹{order?.selling_price}</strong>
                  </div>

                  <div className="price_row">
                    <span>Qty</span>
                    <strong>{order?.quantity}</strong>
                  </div>

                  <div className="price_row total_price">
                    <span>Total</span>
                    <strong>₹{order?.quantity * order?.selling_price}</strong>
                  </div>
                </div>
              </div>
            </div>
          </Link>

          {order?.Product?.Rating_Reviews === null && (
            <button
              className="review_btn"
              onClick={() => handleOpenReview(order)}
            >
              Review & Rating
            </button>
          )}
        </div>
      </div>
    </>
  );
}

export default Order_details_table_cancel;
