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>

                          <h6>
                            Size: <span>{order?.Product_Variant?.name}</span>
                          </h6>
                        </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="text-decoration-none text-dark"
          >
            <div className="row justify-content-center">
              <div className="col-md-6 col-8 mb-3">
                <div className="img_holder">
                  <img
                    className="Product_img"
                    src={order?.Product?.image}
                    alt={order?.Product?.name}
                  />
                </div>
              </div>

              <div className="col-12">
                <div className="descn_holder">
                  <div className="left_div">
                    <h6 className="product_name mb-2">
                      {order?.Product?.name}
                    </h6>

                    {order?.Triple_Variant ? (
                      <>
                        <p className="mb-1">
                          <strong>Polish :</strong>{" "}
                          {
                            order?.Triple_Variant?.Double_Variant
                              ?.Product_Variant?.name
                          }
                        </p>

                        <p className="mb-1">
                          <strong>Colour :</strong>{" "}
                          {order?.Triple_Variant?.Double_Variant?.name}
                        </p>

                        <p className="mb-1">
                          <strong>Size :</strong> {order?.Triple_Variant?.name}
                        </p>
                      </>
                    ) : order?.Double_Variant ? (
                      <>
                        <p className="mb-1">
                          <strong>Polish :</strong>{" "}
                          {order?.Double_Variant?.Product_Variant?.name}
                        </p>

                        <p className="mb-1">
                          <strong>Colour :</strong>{" "}
                          {order?.Double_Variant?.name}
                        </p>
                      </>
                    ) : (
                      order?.Product_Variant?.name && (
                        <p className="mb-1">
                          <strong>Polish :</strong>{" "}
                          {order?.Product_Variant?.name}
                        </p>
                      )
                    )}
                  </div>

                  <div className="price_details">
                    <p className="mb-1">
                      <strong>Current Price :</strong> ₹{order?.selling_price}
                    </p>

                    <p className="mb-1">
                      <strong>Order Qty :</strong> {order?.quantity}
                    </p>

                    <p className="mb-0">
                      <strong>Total Price :</strong> ₹
                      {order?.quantity * order?.selling_price}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </Link>

          {order?.Product?.Rating_Reviews === null && (
            <div className="mt-3">
              <button
                className="btn btn-success btn-sm w-100"
                onClick={() => handleOpenReview(order)}
              >
                Review & Rating
              </button>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

export default Order_details_table_cancel;
