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>
                            {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">Price : </span>₹
                    {val?.selling_price}
                  </p>

                  <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="text-decoration-none text-dark"
            >
              <div className="row justify-content-center">
                <div className="col-md-6 col-sm-6 col-8 mb-3">
                  <div className="img_holder">
                    <img
                      className="Product_img"
                      src={
                        process.env.NEXT_PUBLIC_IMG_URL + val?.Product?.image
                      }
                      alt={val?.Product?.name}
                    />
                  </div>
                </div>

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

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

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

                      {val?.Triple_Variant?.name && (
                        <p className="mb-1">
                          <strong>Size :</strong> {val?.Triple_Variant?.name}
                        </p>
                      )}
                    </div>

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

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

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

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

export default Order_details_table;
