import React from "react";
import "./Order_list_table.css";
// import { Form } from "react-router-dom";
// import { Table } from "react-bootstrap";
import { Form, Table } from "react-bootstrap";
import { variant_type } from "../../../../utils/common";

function Order_list_table({
  order,
  selectedItems,
  setSelectedItems,
  setError,
}) {
  const handleCheckboxChange = (val) => {
    setError("");
    setSelectedItems((prev) => {
      const exists = prev.some((item) => item.id === val.id); // use a unique ID or index
      if (exists) {
        return prev.filter((item) => item.id !== val.id);
      } else {
        return [...prev, val]; // or just store val.id if needed
      }
    });
  };

  return (
    <>
      <div className="order_list_table Order_details_table Cart_Products_card ">
        <div className="table-responsive">
          <Table className="">
            <tbody>
              {order?.Product_Order_Details?.map((val) => (
                <tr>
                  <td>
                    <Form.Check
                      type="checkbox"
                      checked={selectedItems?.some((item) => item.id === val.id)}
                      onChange={() => handleCheckboxChange(val)}
                    />
                  </td>
                  <td>
                    <div className="row">
                      <div className="col-lg-1 col-md-2 col-sm-3 col-4">
                        <div className="img_holder">
                          <img
                            className="Product_img"
                            src={
                              process.env.NEXT_PUBLIC_IMG_URL +
                              val?.Product?.image
                            }
                            alt={"Product_img"}
                          />
                        </div>
                      </div>
                      <div className="col-lg-11 col-md-10 col-sm-9 col-8">
                        <div className="info_text_holder">
                          <div>
                            <h4>{val?.Product?.name}</h4>

                              <h6>
                                {val?.Product?.variant_type_id ===
                                  variant_type.Single && (
                                  <>
                                    <strong>Variant :</strong>{" "}
                                    {val?.Product_Variant?.Metal?.name}
                                  </>
                                )}

                                {val?.Product?.variant_type_id ===
                                  variant_type.Double && (
                                  <>
                                    <strong>Variant :</strong>{" "}
                                    {
                                      val?.Double_Variant?.Product_Variant
                                        ?.Metal?.name
                                    }
                                    , <strong>Size:</strong>{" "}
                                    {val?.Double_Variant?.Size?.name}{" "}
                                  </>
                                )}

                                {val?.Product?.variant_type_id ===
                                  variant_type.Triple && (
                                  <>
                                    <strong>Variant :</strong>{" "}
                                    {
                                      val?.Triple_Variant?.Double_Variant
                                        ?.Product_Variant?.Metal?.name
                                    }
                                    , <strong>Size:</strong>{" "}
                                    {
                                      val?.Triple_Variant?.Double_Variant?.Size
                                        ?.name
                                    }
                                    , <strong>Diamond:</strong>{" "}
                                    {val?.Triple_Variant?.Diamond?.name}
                                  </>
                                )}
                              </h6>
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>

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

              {/* <tr>
                                <td>
                                    <Form.Check type={"checkbox"} />
                                </td>
                                <td>
                                    <div className="row">
                                        <div className="col-lg-1 col-md-2 col-sm-3 col-4">
                                            <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-lg-11 col-md-10 col-sm-9 col-8">
                                            <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>
                                    <Form.Check type={"checkbox"} />
                                </td>
                                <td>
                                    <div className="row">
                                        <div className="col-lg-1 col-md-2 col-sm-3 col-4">
                                            <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-lg-11 col-md-10 col-sm-9 col-8">
                                            <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>
      </div>
    </>
  );
}

export default Order_list_table;
