import React, { ReactElement } from 'react';
import './ProductPrice.scss';
import { Price, SpecificPrice } from '../types/VariantTypes';

type priceVariant = 'OriginalPrice' | 'CurrentPrice' | 'DepositPrice';

const returnPrices = (
  priceVariant: priceVariant,
  priceData: SpecificPrice,
): ReactElement<HTMLSpanElement> => {
  const priceHuman = priceData.human;
  switch (priceVariant) {
    case 'OriginalPrice':
      return <span className="original-price">{priceHuman}</span>;
    case 'CurrentPrice':
      return <span className="current-price">{priceHuman}</span>;
    case 'DepositPrice':
      return priceHuman ? (
        <span className="deposit-price">{`(${priceHuman} Deposit)`}</span>
      ) : null;
  }
};

interface ProductPriceProps {
  priceData: Price;
}

export const ProductPrice = (
  props: ProductPriceProps,
): ReactElement<HTMLDivElement> => {
  const originalPrice = props.priceData.original_price.price;
  const currentPrice = props.priceData.current_price.price;
  const showOriginalPrice = originalPrice !== currentPrice;

  return (
    <div className="product-price paragraph-content mo-fs-truncate">
      {showOriginalPrice &&
        returnPrices('OriginalPrice', props.priceData.original_price)}
      {returnPrices('CurrentPrice', props.priceData.current_price)}
      {returnPrices('DepositPrice', props.priceData.deposit_price)}
    </div>
  );
};