import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;

import React from 'react';
import styled from 'styled-components';
import { Typography } from '../';

var renderPrice = function renderPrice(price, size, currency, isInitial) {
  if (size === void 0) {
    size = 'normal';
  }

  if (!price && price !== 0) return null;

  if (typeof price === 'number' || typeof price === 'string') {
    var [amount, pennies] = price.toString().split('.');
    return /*#__PURE__*/React.createElement(RegularPrice, {
      "data-price": true,
      size: size
    }, amount, /*#__PURE__*/React.createElement(Pennies, {
      size: size,
      isInitial: isInitial
    }, ",", (pennies || '').padEnd(2, '0')), /*#__PURE__*/React.createElement(CurrencyLabel, {
      size: size,
      isInitial: isInitial
    }, currency));
  }

  return /*#__PURE__*/React.createElement(RegularPrice, {
    size: size
  }, price.price, /*#__PURE__*/React.createElement(Pennies, {
    size: size,
    isInitial: isInitial
  }, ",", price.pennies), /*#__PURE__*/React.createElement(CurrencyLabel, {
    size: size,
    isInitial: isInitial
  }, price.currency || currency));
};

export var Price = (_ref) => {
  var {
    price,
    discountedPrice,
    discountPercentage,
    size = 'normal',
    currency,
    hideDiscountPercentage = false
  } = _ref;
  var isDiscounted = Boolean(discountedPrice);
  return /*#__PURE__*/React.createElement(Container, {
    "data-price-container": ""
  }, /*#__PURE__*/React.createElement(PriceLabel, {
    "data-price-label": "",
    "data-discounted": Boolean(discountedPrice)
  }, !isDiscounted && renderPrice(price, size, currency, true), isDiscounted && /*#__PURE__*/React.createElement(Discount, null, /*#__PURE__*/React.createElement(DiscountedPrice, {
    "data-discount-price": ""
  }, renderPrice(discountedPrice, size, currency)), /*#__PURE__*/React.createElement(InitialPrice, {
    "data-initial-price": ""
  }, renderPrice(price, size, currency, true)), !hideDiscountPercentage && /*#__PURE__*/React.createElement(DiscountPercentage, {
    "data-discount-percentage": "",
    size: size
  }, "-", discountPercentage, "%"))));
};
var Discount = styled.div.attrs({
  className: 'd-flex'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  align-items: baseline;\n"])));
var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
var PriceLabel = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n"])));
var RegularPrice = styled(Typography).attrs({
  variant: 1,
  as: 'span'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  color: ", ";\n  line-height: 1;\n"])), props => props.size === 'tiny' && "\n    font-size: 1.8rem;\n  ", props => props.size === 'small' && "\n    font-size: 2.4rem;\n  ", (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
var InitialPrice = styled.span.attrs({
  className: 'mx-3'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  text-decoration: line-through;\n  font-size: 1.5rem;\n  line-height: 1.2;\n\n  & span {\n    font-size: 1.5rem;\n    line-height: 1.2;\n  }\n"])));
var CurrencyLabel = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), props => !props.isInitial && "\n      font-size: 1rem;\n      margin-top: 0.5rem;\n  ");
var Pennies = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), props => "\n\n      " + (props.size === 'tiny' && "\n        bottom: " + (props.isInitial ? '0' : '-1.3rem') + ";\n      ") + "\n  ");
var DiscountPercentage = styled.span.attrs({
  className: 'p-2'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  font-size: 1.4rem;\n  line-height: 1;\n  border-radius: 0.3rem;\n  color: ", ";\n  background: ", ";\n  margin-bottom: 0.2rem;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.discount;
});
var DiscountedPrice = styled(Typography).attrs({
  variant: 1,
  as: 'span'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  line-height: 1;\n\n  & span {\n    color: ", ";\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.discount;
});
//# sourceMappingURL=index.js.map