"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Price = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lib = require("@sentecacommerce-theme/lib");

var _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var Price = function Price(_ref) {
  var price = _ref.price,
      discountedPrice = _ref.discountedPrice;

  var _usePrice = (0, _lib.usePrice)({
    price: price,
    discountedPrice: discountedPrice
  }),
      originalPrice = _usePrice.price,
      discountPercentage = _usePrice.discountPercentage,
      discountPrice = _usePrice.discountPrice;

  if (discountPrice) {
    return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(CurrentPrice, {
      isDiscount: true
    }, discountPrice.displayValue), /*#__PURE__*/_react["default"].createElement(OldPrice, null, originalPrice.displayValue), /*#__PURE__*/_react["default"].createElement(DiscountPercentageWrapper, null, /*#__PURE__*/_react["default"].createElement(DiscountPercentage, null, "-" + discountPercentage + "%"))));
  }

  return /*#__PURE__*/_react["default"].createElement(CurrentPrice, null, originalPrice.displayValue);
};

exports.Price = Price;
var CurrentPrice = (0, _styledComponents["default"])(_Common.Typography).attrs(function (props) {
  return {
    variant: 'base',
    color: props.isDiscount ? 'discount' : 'primary'
  };
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  // font-weight: 600;\n  ", "\n"])), function (props) {
  return !props.isDiscount && "\n    width: fit-content !important;\n    align-self: flex-end;\n    margin: 0 0 0 auto;\n    @media (max-width: " + props.theme.breakpoints.md.max + "){\n      margin: 0 auto 0 0;\n    }\n  ";
});
var OldPrice = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 6,
  className: 'mx-2'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-decoration: line-through;\n  line-height: 1.2;\n  opacity: 0.5;\n"])));

var Container = _styledComponents["default"].span.attrs({
  className: 'mr-0 ml-auto mr-lg-auto ml-lg-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: fit-content !important;\n  align-self: flex-end;\n"])));

var DiscountPercentageWrapper = _styledComponents["default"].div.attrs({
  className: 'px-2 d-flex'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-radius: 0.3rem;\n  width: fit-content;\n  background-color: ", ";\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.discount;
});

var DiscountPercentage = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 7,
  color: 'secondary'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 0.2rem;\n"])));

var Row = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center my-2'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=index.js.map