import React from "react";

import { useSelector } from "react-redux";

import usePriceInfo from "../../../../hooks/usePriceInfo";
import { $L } from "../../../../utils/helperMethods";
import css from "./BillingProductPrice.module.less";

export default function BillingProductPrice({
  patncNm,
  productInfo,
  selectedOptions,
}) {
  const productData = useSelector((state) => state.main.productData);
  const { shippingCharge } = productInfo || productData;

  const { priceInfo } = selectedOptions
    ? selectedOptions
    : productInfo || productData;
  const { originalPrice, discountedPrice, discountRate } =
    usePriceInfo(priceInfo) || {};

  return (
    <>
      {originalPrice && discountedPrice && (
        <div
          className={
            originalPrice === discountedPrice
              ? css.notDiscountedPriceLayer
              : css.discountedPriceLayer
          }
        >
          <span>
            {patncNm} {$L("Price")}
          </span>
          <div className={css.priceWrapper}>
            {discountedPrice !== originalPrice && discountRate >= 5 && (
              <span className={css.discountRateTag}>{discountRate}</span>
            )}
            <span className={css.discountedPrice}>{discountedPrice}</span>
            {discountedPrice !== originalPrice && (
              <span className={css.originalPrice}>{originalPrice}</span>
            )}
          </div>
        </div>
      )}
      {shippingCharge && (
        <div className={css.shippingLayer}>
          <span>{$L("Shipping and Handling")}</span>
          <span>{shippingCharge}</span>
        </div>
      )}
    </>
  );
}
