"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;

var Price = function Price() {
  var _selectedVariant$offe, _selectedVariant$offe2;

  var _useProductState = (0, _lib.useProductState)(),
      selectedVariant = _useProductState.selectedVariant;

  var _usePrice = (0, _lib.usePrice)({
    price: selectedVariant == null ? void 0 : (_selectedVariant$offe = selectedVariant.offer) == null ? void 0 : _selectedVariant$offe.originalPrice,
    discountedPrice: selectedVariant == null ? void 0 : (_selectedVariant$offe2 = selectedVariant.offer) == null ? void 0 : _selectedVariant$offe2.discountedPrice
  }),
      price = _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,
      dangerouslySetInnerHTML: (0, _lib.createDangerousMarkup)(discountPrice.html)
    }), /*#__PURE__*/_react["default"].createElement(OldPrice, {
      dangerouslySetInnerHTML: (0, _lib.createDangerousMarkup)(price.html)
    }), /*#__PURE__*/_react["default"].createElement(DiscountPercentage, null, "-", discountPercentage, "%")));
  }

  return /*#__PURE__*/_react["default"].createElement(CurrentPrice, {
    dangerouslySetInnerHTML: (0, _lib.createDangerousMarkup)(price.html)
  });
};

exports.Price = Price;
var CurrentPrice = (0, _styledComponents["default"])(_Common.Typography).attrs(function (props) {
  return {
    variant: 4,
    color: props.isDiscount ? 'discount' : 'primary'
  };
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 600;\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"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var DiscountPercentage = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 7,
  color: 'secondary',
  className: 'px-2 mb-1 '
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-radius: 0.3rem;\n  width: fit-content;\n  align-self: center;\n  background-color: ", ";\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette.discount;
});

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