import React from "react";
import "./Order_details_table.css";
import { Table, Form } from "react-bootstrap";

import { encodeId, variant_type } from "../../../../utils/common";
import Link from "next/link";

function 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">
          {order?.Product_Order_Details?.map((val) => (
            <div className="row align-items-center inner_card">
              <div className="col-sm-8 ">
                <Link
                  href={`/product-details/${encodeId(val?.Product?.id)}`}
                  className="text-decoration-none text-dark"
                >
                  <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?.image
                          }
                          alt="Product_img"
                        />
                      </div>
                    </div>

                    <div className="col-xl-9 col-lg-9 col-md-9 col-9">
                      <div className="info_text_holder">
                        <div>
                          <h4>{val?.Product?.name}</h4>

                          <h6>
                            <p className="price_inner_text">
                              <span className="right_label">Price : </span>₹
                              {val?.selling_price}
                            </p>
                            {/* {val?.Product?.variant_type_id ===
                              variant_type.Single && (
                              <>
                                <>Variant :</>{" "}
                                {val?.Product_Variant?.Metal?.name}
                              </>
                            )} */}

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

                            {val?.Product?.variant_type_id ===
                              variant_type.Triple && (
                              <>
                                <>Variant :</>{" "}
                                {
                                  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>
                </Link>

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

              <div className="col-sm-4 ">
                <div className="new_price_holder">
                  <p className="price_inner_text">
                    <span className="right_label">Order Qty : </span>₹
                    {val?.quantity}
                  </p>

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

      <div className="d-block d-lg-none mobile_view_holder">
        {order?.Product_Order_Details?.map((val) => (
          <div className="mobile_product_card" key={val?.id}>
            <Link
              href={`/product-details/${val?.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 + val?.Product?.image}
                    alt={val?.Product?.name}
                  />
                </div>

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

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

                    {val?.Double_Variant?.name && (
                      <p>
                        <span>Colour:</span> {val?.Double_Variant?.name}
                      </p>
                    )}

                    {val?.Triple_Variant?.name && (
                      <p>
                        <span>Size:</span> {val?.Triple_Variant?.name}
                      </p>
                    )}
                  </div>

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

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

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

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

export default Order_details_table;
