import React from "react";
import logo from "../../../../public/defualt/black.png";
function DrapPrient({ product, shop, invoice, other }) {
  // Accessing values
  if (other.length != 0) {
    const { increment, productDis, discount, grandTotal, total, vat } =
      other[0];

    let arrayConver = Object.entries(increment);
    const qty = arrayConver.reduce(
      (old, item) => Number(old) + Number(item[1][0]),
      0
    );
    return (
      <>
        <div className="flex flex-col items-center">
          <div className="w-full">
            <div className="m-h-10 flex  items-center flex-col -mt-20">
              <div className="logo h-[9rem] w-[12rem]">
                <img src={logo} alt="" />
              </div>
              <div className="shop-info text-center">
                <p className="text-lg">Orange Cafe</p>
                <p className="text-sm">{shop.location}</p>
                <p className="text-sm">
                  Dhaka. Phone: {shop.number}
                </p>
                <p className="text-sm">Invoice No: {invoice}</p>
              </div>
            </div>
            {/* Information */}
            <div className="text-sm my-2">
              <p>
                Date: {new Date().toLocaleDateString("en-us")}
              </p>
            </div>
            {/* Product List */}
            <table className="w-full  text-[13px] text-left table-sm">
              <tbody className=" relative">
                {product[0].map((item, index) => {
                  let productDiscounts =
                    productDis[item.id] &&
                      productDis[item.id][0] !== undefined &&
                      productDis[item.id][0] !== null
                      ? productDis[item.id][0]
                      : 0;
                  return (
                    <tr className="bg-white">
                      <th className="text-gray-700 font-normal">
                        <span># {index + 1} : </span>
                        {item.name}
                      </th>
                      <td className="text-right text-gray-700">
                        {product[1][item.id][1]} x{" "}
                        {product[1][item.id][0]} -{" "}
                        {productDiscounts} %={" "}
                        {Math.round(
                          product[1][item.id][0] *
                          product[1][item.id][1] -
                          (product[1][
                            item.id
                          ][1] *
                            product[1][
                            item.id
                            ][0] *
                            productDiscounts) /
                          100
                        )}{" "}
                        ৳
                      </td>
                    </tr>
                  );
                })}
                <tr className=" absolute -bottom-2 text-bold right-0">
                  <td colSpan={2} className="  ">
                    ________________
                  </td>
                </tr>
              </tbody>
            </table>
            {/* Calculation Section */}
            <table className="w-full font-bold text-[14px] text-left table-sm">
              <tbody>
                <tr className=" ">
                  <th className=" py-1">Total Item(s): {qty}</th>
                </tr>
                <tr>
                  <th className="">Sub Total</th>
                  <td className="  text-right">{total}৳</td>
                </tr>
                <tr>
                  <th className="font-normal">Vat</th>
                  <td className="font-normal  text-right">
                    {vat ? vat : 0} %
                  </td>
                </tr>
                <tr>
                  <th className="font-normal">Discount</th>
                  <td className="font-normal  text-right">
                    {discount ? discount : 0} %
                  </td>
                </tr>
                <tr className="border-b  ">
                  <th className="">Grand Total</th>
                  <td className=" text-right">{grandTotal} ৳</td>
                </tr>
              </tbody>
            </table>

            <div className="mt-3 text-[10px]">
              Maintenance by DATA DSS LTD.
              <br /> Website: https://datadss.com/
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default DrapPrient;
