import React from "react";
import "./Order_Overview_summery_holder.css";
import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";

function Order_Overview_summery_holder({ data, address, paymentValue }) {
  const currentCurrency = useSelector((state) => state.master.currentCurrency);
  const rate = Number(currentCurrency?.rate) || 1;
  const symbol = currentCurrency?.symbol || "₹";
  return (
    <>
      <section className="Order_summery_holder Order_Overview_summery_holder"> 
        <div className="Order_summery_table">
          <div className="table-responsive">
            <Table>
              <tbody>
                <tr>
                  {/* <td>Price Item({data?.order_summary?.no_of_item} ) :</td> */}
                  <td>SubTotal:</td>
                  <td className="text-end">
                    {symbol}{" "}
                    {Number(data?.order_summary?.total_selling_price).toFixed(
                      2,
                    )}
                  </td>
                </tr>
                <tr>
                  <td>Coupon Discount :</td>
                  <td className="text-end">
                    -{symbol}{" "}
                    {Number(data?.order_summary?.total_coupon_discount).toFixed(
                      2,
                    )}
                  </td>
                </tr>
                <tr>
                  <td>Payment Method :</td>
                  <td className="text-end">
                    {paymentValue === 2
                      ? "Online"
                      : paymentValue === 3
                      ? "Wallet"
                      : "COD"}
                  </td>
                </tr>
                <tr>
                  <td>Shipping :</td>
                  <td className="text-end">
                    {Number(data?.order_summary?.total_delivery_charges) === 0
                      ? "Free"
                      : Number(
                          data?.order_summary?.total_delivery_charges,
                        ).toFixed(2)}
                  </td>
                </tr>{" "}
                <tr>
                  <td>Tax :</td>
                  <td className="text-end">{data?.order_summary?.total_tax}</td>
                </tr>{" "}
                <tr>
                  <td>Address :</td>
                  <td className="text-end">
                    {address?.building}, {address?.street},{" "}
                    {address?.city_id?.label}, {address?.state_id?.label}, -
                    {address?.pincode_id?.label}, {address?.country_id?.label}.
                  </td>
                </tr>
                <tr className="total_tr_holder">
                  <td>
                    <b>Total Amount :</b>
                  </td>
                  <td className="text-end">
                    <b>
                      {symbol}{" "}
                      {Number(data?.order_summary?.total_amount).toFixed(2)}
                    </b>
                  </td>
                </tr>
              </tbody>
            </Table>
          </div>
        </div>
      </section>
    </>
  );
}

export default Order_Overview_summery_holder;
