"use strict";

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

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

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

var _Typography = require("../../../Common/Typography");

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, _templateObject7, _templateObject8;

var PromotionItem = function PromotionItem(_ref) {
  var _item$assets$, _item$assets$$sources;

  var item = _ref.item,
      labels = _ref.labels;

  var _useConfigState = (0, _lib.useConfigState)(),
      imagesConfig = _useConfigState.imagesConfig,
      date = _useConfigState.date,
      customFieldKeys = _useConfigState.customFieldKeys;

  var maxDiscountPercent = (0, _lib.customFieldsToMap)(item.custom)[customFieldKeys.maxDiscountPercent];
  var title = (0, _lib.getTranslatableField)(item.name);
  var image = (_item$assets$ = item.assets[0]) == null ? void 0 : (_item$assets$$sources = _item$assets$.sources) == null ? void 0 : _item$assets$$sources[0];
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: "/" + (0, _lib.getTranslatableField)(item.slug) + "/v",
    passHref: true
  }, /*#__PURE__*/_react["default"].createElement("a", null, /*#__PURE__*/_react["default"].createElement(Relative, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyImage, {
    src: image.url || imagesConfig.fallbackImage,
    alt: title || '',
    width: image.width || imagesConfig.ratio.width,
    height: image.height || imagesConfig.ratio.height
  }), /*#__PURE__*/_react["default"].createElement(SaleLabel, null, /*#__PURE__*/_react["default"].createElement(Text, null, labels.upTo), /*#__PURE__*/_react["default"].createElement(Percent, null, "-" + maxDiscountPercent + "%"))), /*#__PURE__*/_react["default"].createElement(Info, null, /*#__PURE__*/_react["default"].createElement(Name, null, title), /*#__PURE__*/_react["default"].createElement(ValidTo, null, labels.validTo + ": " + new Date(item.validTo).toLocaleDateString(date.locale || undefined))))));
};

exports.PromotionItem = PromotionItem;

var Container = _styledComponents["default"].div.attrs({
  className: 'col-12 col-lg-3 p-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Relative = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var SaleLabel = _styledComponents["default"].div.attrs({
  className: 'd-flex  justify-content-center align-items-center px-2'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  bottom: 4.8rem;\n  right: 0;\n  background-color: ", ";\n  color: ", ";\n  line-height: 1;\n  gap: 0.4rem;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.discount;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
});

var Text = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 6,
  color: 'secondary',
  as: 'span'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var Percent = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 2,
  color: 'secondary',
  as: 'span'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: bold;\n"])));

var Info = _styledComponents["default"].div.attrs({
  className: 'p-3'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background-color: ", ";\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.discount;
});

var Name = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 4,
  color: 'secondary',
  as: 'p',
  className: 'mb-1'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var ValidTo = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 6,
  color: 'secondary',
  as: 'p'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=index.js.map