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

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

import { Typography } from '../../../Common/Typography';
import React from 'react';
import styled from 'styled-components';
import { getTranslatableField, Link, useConfigState, customFieldsToMap } from '@sentecacommerce-theme/lib';
import { LazyImage } from '../../../Common';
export var PromotionItem = (_ref) => {
  var _item$assets$, _item$assets$$sources;

  var {
    item,
    labels
  } = _ref;
  var {
    imagesConfig,
    date,
    customFieldKeys
  } = useConfigState();
  var maxDiscountPercent = customFieldsToMap(item.custom)[customFieldKeys.maxDiscountPercent];
  var title = 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.createElement(Container, null, /*#__PURE__*/React.createElement(Link, {
    href: "/" + getTranslatableField(item.slug) + "/v",
    passHref: true
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(Relative, null, /*#__PURE__*/React.createElement(LazyImage, {
    src: image.url || imagesConfig.fallbackImage,
    alt: title || '',
    width: image.width || imagesConfig.ratio.width,
    height: image.height || imagesConfig.ratio.height
  }), /*#__PURE__*/React.createElement(SaleLabel, null, /*#__PURE__*/React.createElement(Text, null, labels.upTo), /*#__PURE__*/React.createElement(Percent, null, "-" + maxDiscountPercent + "%"))), /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement(Name, null, title), /*#__PURE__*/React.createElement(ValidTo, null, labels.validTo + ": " + new Date(item.validTo).toLocaleDateString(date.locale || undefined))))));
};
var Container = styled.div.attrs({
  className: 'col-12 col-lg-3 p-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Relative = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var SaleLabel = styled.div.attrs({
  className: 'd-flex  justify-content-center align-items-center px-2'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 4.8rem;\n  right: 0;\n  background-color: ", ";\n  color: ", ";\n  line-height: 1;\n  gap: 0.4rem;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.discount;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
});
var Text = styled(Typography).attrs({
  variant: 6,
  color: 'secondary',
  as: 'span'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Percent = styled(Typography).attrs({
  variant: 2,
  color: 'secondary',
  as: 'span'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n"])));
var Info = styled.div.attrs({
  className: 'p-3'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.discount;
});
var Name = styled(Typography).attrs({
  variant: 4,
  color: 'secondary',
  as: 'p',
  className: 'mb-1'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var ValidTo = styled(Typography).attrs({
  variant: 6,
  color: 'secondary',
  as: 'p'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map