import React from "react";
import cx from "classnames";
import styles from "./invoice.module.scss";
import { EditOutlined } from "@ant-design/icons";
import { Image, Input } from "antd";
import _ from "lodash";
import { s3BucketUrl } from "../../constants/urls";
import { BaseCal, GstCal, numberWithCommas, PriceCal } from "../../constants/commonFunction";

export default function Invoice(props: any) {
  const total = props?.details?.items?.reduce((total:any, obj:any) => obj.additional?.shipCharge=="NA"?0:obj.additional?.shipCharge + total,0);

  const grandTotal = (price:any,tax:any,shipCharge:any,discount:any)=>{
      const returnVal:any =parseFloat(price) + parseFloat(tax) + parseFloat(shipCharge) - parseFloat(discount);
      return  parseFloat(returnVal).toFixed(2);

  }

  return (
    <div className={styles.invoiceContainer}>
      <div className={cx("text-center mb-2 ", styles.sectionHeader)}>
        Payment Summary
      </div>
      {!_.isEmpty(props.details) &&
        props?.details?.items.map((product: any, idx: any) => {
          return (
            <div key={idx}>
              <div className={cx("ant-row py-2")}>
                <div className={cx("ant-col ant-col-xl-4 ant-col-xs-3")}>
                  <Image
                    preview={false}
                    width={30}
                    height={30}
                    src={s3BucketUrl + product?.product?.base_image?.path}
                    alt="product_img"
                  />
                </div>
                <div className={cx("ant-col ant-col-xl-12 ant-col-xs-21")}>
                  <span className={styles.productTitle}>
                    {product?.product?.name}
                  </span>
                  <div>
                    <div>
                      <span className={styles.quantityTitle}>SKU</span>
                      <span className={styles.quantityValue}>
                        &nbsp;
                        {product?.sku}
                      </span>
                    </div>
                    <div>
                      <span className={styles.quantityTitle}>Total Weight</span>
                      <span className={styles.quantityValue}>
                        &nbsp;
                        {product?.total_weight}
                      </span>
                    </div>
                    <span className={styles.quantityTitle}>By</span>
                    <span className={styles.quantityValue}>
                      &nbsp;
                      {product?.additional?.seller_code}
                    </span>
                    <span className={styles.quantityTitle}>
                      &nbsp;&nbsp;&nbsp;Qty
                    </span>
                    <span className={styles.quantityValue}>
                      &nbsp;{product?.quantity}
                    </span>
                  </div>
                  {
                      Object.keys(product?.additional?.gift_sheet || {}).length > 0 && <div>
                        <span className={styles.quantityTitle} style={{ color: 'red', alignSelf: 'center' }}>Note: The product will be sent to the address mentioned in the sheet</span>
                        <br />
                        <span className={styles.quantityValue}>
                        <a href={product?.additional?.gift_sheet?.url}>{product?.additional?.gift_sheet?.title}</a></span>
                      </div>
                    }
                </div>

                <div
                  className={cx(
                    "ant-col ant-col-xl-8 ant-col-xs-24 text-right"
                  )}
                >
                  <span className={styles.productPrice}>
                    {" "}
                    {product?.formated_base_total}
                  </span>
                </div>
                <div className="ant-row" style={{ width: "100%" }}>
                  <div className={cx("ant-col ant-col-xl-4 ant-col-xs-0")} />
                  <div className={cx("ant-col ant-col-xl-20")}>
                    <span className={styles.quantityTitle}>Delivery Type</span>
                    <span className={styles.quantityValue}>
                      &nbsp;
                      {product?.additional?.shipping_type == 1
                        ? "Lightening Delivery"
                        : product?.additional?.shipping_type == 2?"Indispare Delivery":"Regular Delivery"}
                    </span>
                  </div>
                </div>
              </div>
              <hr />
            </div>
          );
        })}
      {props?.page === "SignIn" ? (
        <div>
          <div className={cx("mt-4", styles.pinCodeTitle)}>
            Estimate Shipping and Tax
          </div>
          <div className={styles.textSecondary}>
            Enter your destination to get a shipping estimate.
          </div>
          <Input suffix={<EditOutlined />} placeholder="Enter Pincode" />
        </div>
      ) : null}
      {!_.isEmpty(props.details) && (
        <div className="my-4 w-full">
          <div className="flex justify-between py-2">
            <div className={styles.invoiceLeftCol}>Subtotal</div>
            <span className={styles.invoiceRightCol}>
              {/* ₹{PriceCal(props?.details?.tax_total,parseFloat(props?.details?.grand_total))} */}
              {props?.details?.formated_sub_total}
              {/* ₹{BaseCal(18, parseInt(props?.details?.base_sub_total))} */}
            </span>
          </div>
          {props?.details?.coupon_code ? (
            <div className={cx("flex justify-between py-2", styles.borderTop)}>
              <div className={styles.invoiceLeftCol}>
                Discount ({props?.details?.coupon_code})
              </div>
              <span className={styles.invoiceRightCol}>
                {props?.details?.formated_base_discount}
              </span>
            </div>
          ) : null}
          <div className={cx("flex justify-between py-2", styles.borderTop)}>
            <div className={styles.invoiceLeftCol}>GST</div>
            <span className={styles.invoiceRightCol}>
              {props?.details?.formated_tax_total}
              {/* ₹{GstCal(18, parseInt(props?.details?.base_sub_total))} */}
            </span>
          </div>

          {props?.details?.selected_shipping_rate === null ?  <div className={cx("flex justify-between py-2", styles.borderTop)}>
              <div className={styles.invoiceLeftCol}>Shipping Charges({props.details.total_weight}Kg)</div>
              <span className={styles.invoiceRightCol}>
                (₹{numberWithCommas(parseFloat(total).toFixed(2))})
              </span>
            </div> : (
            <div className={cx("flex justify-between py-2", styles.borderTop)}>
              <div className={styles.invoiceLeftCol}>Shipping Charges({props.details.total_weight}Kg)</div>
              <span className={styles.invoiceRightCol}>
                {props?.details?.selected_shipping_rate?.formated_price}
              </span>
            </div>
          )}
          <div className="flex justify-between py-2">
            <div className={styles.invoiceLeftCol}>Total Price</div>
            {props?.details?.selected_shipping_rate === null ?<span className={styles.invoiceRightCol}>
            ₹{numberWithCommas(grandTotal(props?.details?.sub_total,props?.details?.tax_total,total,props?.details?.discount))}
            </span>:<span className={styles.invoiceRightCol}>
              {props?.details?.formated_grand_total === null
                ? "-"
                : props?.details?.formated_grand_total}
            </span>}
          </div>
          {/* <div className="py-2">
          <div className={styles.textSecondary}>
            Shipping charges applicable as per your pincode 500006
          </div>
          <div className={styles.freeShippingText}>
            Add items of ₹50,000 more for Free Shipping
          </div>
        </div> */}
        </div>
      )}
    </div>
  );
}