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

function Order_list_table({
  order,
  selectedItems,
  setSelectedItems,
  setError,
  product,
}) {
  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,
                      )}
                      disabled={!val?.Product?.is_returnable}
                      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>{" "} */}
                                  <strong>
                                    {" "}
                                    {val?.Product?.variant_name} :
                                  </strong>{" "}
                                  {val?.Product_Variant?.Metal?.name}
                                </>
                              )}

                              {val?.Product?.variant_type_id ===
                                variant_type.Double && (
                                <>
                                  {/* <strong>Variant :</strong>{" "} */}
                                  <strong>
                                    {" "}
                                    {val?.Product?.variant_name} :
                                  </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>{" "} */}
                                  <strong>
                                    {" "}
                                    {val?.Product?.variant_name} :
                                  </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="wrapper-class">
                      {val?.Product?.is_returnable ? (
                        <p className="return-status green-return-status">
                          <span>✓ </span>Returnable
                        </p>
                      ) : (
                        <p className="return-status not-return">
                          <span>✕ </span> Non-returnable
                        </p>
                      )}
                    </div>
                    <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>
              ))}
            </tbody>
          </Table>
        </div>
      </div>
    </>
  );
}

export default Order_list_table;
