"use strict";

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

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

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

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

var _reactBarcodes = require("react-barcodes");

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

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

var _NavigationSkeleton = require("../NavigationSkeleton");

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

var VIP_AMOUNT = 3000;

var LoyaltyProgram = function LoyaltyProgram() {
  var _useLoyaltyProgram = (0, _lib.useLoyaltyProgram)(),
      cardKey = _useLoyaltyProgram.cardKey,
      customerGroupLabel = _useLoyaltyProgram.customerGroupLabel,
      cardSum = _useLoyaltyProgram.cardSum;

  var labels = (0, _lib.useLocalLabels)();

  var _useBarcode = (0, _reactBarcodes.useBarcode)({
    value: "" + cardKey,
    options: {
      displayValue: true,
      format: 'CODE39',
      width: 1.8,
      height: 60
    }
  }),
      inputRef = _useBarcode.inputRef;

  return /*#__PURE__*/_react["default"].createElement(_NavigationSkeleton.NavigationSkeleton, {
    url: "loyalty-program",
    header: "Loyalty program"
  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Inner, null, /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, cardKey ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Text, {
    isHeader: true
  }, customerGroupLabel), /*#__PURE__*/_react["default"].createElement(Text, null, labels.totalPoints, " ", cardSum == null ? void 0 : cardSum.amount), /*#__PURE__*/_react["default"].createElement(ProgressBarContainer, {
    width: "200px"
  }, /*#__PURE__*/_react["default"].createElement(ProgressBar, {
    color: '#ff7979',
    width: '150px',
    value: cardSum == null ? void 0 : cardSum.amount,
    max: VIP_AMOUNT
  }), (cardSum == null ? void 0 : cardSum.amount) > VIP_AMOUNT && /*#__PURE__*/_react["default"].createElement(EmojiContainer, null, "\uD83C\uDF89\uD83E\uDD73\uD83C\uDF8A")), /*#__PURE__*/_react["default"].createElement(BarcodeWrapper, {
    isActive: Boolean(cardSum == null ? void 0 : cardSum.amount)
  }, /*#__PURE__*/_react["default"].createElement("canvas", {
    ref: inputRef
  }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Text, {
    isHeader: true
  }, labels.noLoyaltyProgram), /*#__PURE__*/_react["default"].createElement(BarcodeWrapper, {
    isActive: Boolean(cardSum == null ? void 0 : cardSum.amount)
  }, /*#__PURE__*/_react["default"].createElement("canvas", {
    ref: inputRef
  }))))))));
};

exports.LoyaltyProgram = LoyaltyProgram;

var ProgressBar = function ProgressBar(_ref) {
  var value = _ref.value,
      max = _ref.max,
      color = _ref.color;
  return /*#__PURE__*/_react["default"].createElement(Container, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement("progress", {
    value: value,
    max: max
  }), /*#__PURE__*/_react["default"].createElement("span", null, (Math.min(value, max) / max * 100).toFixed(2), "%"));
};

var Container = _styledComponents["default"].div.attrs({
  className: 'pt-3 pb-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  font-size: 13px;\n  border-bottom: 1px solid #f0f0f0;\n"])));

var Inner = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  display: flex;\n"])));

var Wrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  flex: 1;\n"])));

var ContentContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex: 1;\n\n  @media screen and (max-width: 991px) {\n    flex: 1 1 100%;\n  }\n"])));

var Text = _styledComponents["default"].p.attrs({
  className: 'mb-1'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  /* line-height: 1.75; */\n  font-size: 14px;\n  white-space: normal;\n  overflow: hidden;\n  color: #888;\n  display: block;\n  text-decoration: none;\n  ", "\n"])), function (props) {
  return props.isHeader && "\n  font-size: 15px;\n  font-weight: 500;\n  color: " + props.theme.palette.primary + ";\n  ";
});

var BarcodeWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  margin-left: -10px;\n  display: ", ";\n\n  @media (max-width: ", ") {\n    height: 60px;\n    margin-left: 0;\n\n    & svg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 80%;\n      height: auto;\n    }\n  }\n"])), function (props) {
  return props.isActive ? 'block' : 'none';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
});

var ProgressBarContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  progress {\n    margin-right: 8px;\n  }\n\n  progress[value] {\n    width: ", ";\n\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  progress[value]::-webkit-progress-bar {\n    height: 10px;\n    border-radius: 20px;\n    background-color: #eee;\n  }\n\n  progress[value]::-webkit-progress-value {\n    height: 10px;\n    border-radius: 20px;\n    background-color: '#ffa500';\n  }\n\n  display: flex;\n  flex-direction: row;\n"])), function (props) {
  return props.width;
});

var EmojiContainer = _styledComponents["default"].span.attrs({
  className: 'pt-3 pb-3'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-left: 15px;\n"])));
//# sourceMappingURL=index.js.map