import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';


function extractPricingContent(text, priceTag) {
  if (!text) {
    return [];
  }

  // how do i do this?
  const priceToken = /priceTag/i;
  const priceTokenMatched = text.match(priceToken);
  const [first, second] = text.split(priceToken);

  return [first, !!priceTokenMatched, second];
}

function DiscountedPriceDisplay(props) {
  const { content, regularPrice, discountPrice, priceToken, priceDisplayClassName } = props;
  // probably don't want second
  const [first, showPriceContent, second] = extractPricingContent(content, priceToken);

  return (
    <h3 className={priceDisplayClassName}>
      <span>
        {first}
        {showPriceContent && (
          <span>
            <span
              className={classNames({
                'u-strikethrough': !!discountPrice,
              })}
            >
              {regularPrice}
            </span>
            {' '}
            {!!discountPrice && <span className="u-highlight">{discountPrice}</span>}
            {' '}
          </span>
        )}
      </span>
    </h3>
  );
}

DiscountedPriceDisplay.propTypes = {
  content: PropTypes.string,
  regularPrice: PropTypes.string,
  discountPrice: PropTypes.string,
  priceToken: PropTypes.string.isRequired,
  priceDisplayClassName: PropTypes.string.isRequired,
};

DiscountedPriceDisplay.defaultProps = {
  content: '',
  regularPrice: '',
  discountPrice: '',
};

export default DiscountedPriceDisplay;