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

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

import React from 'react';
import { useBarcode } from 'react-barcodes';
import styled from 'styled-components';
import { useLoyaltyProgram, useLocalLabels } from '@sentecacommerce-theme/lib';
import { NavigationSkeleton } from '../NavigationSkeleton';
var VIP_AMOUNT = 3000;
export var LoyaltyProgram = () => {
  var {
    cardKey,
    customerGroupLabel,
    cardSum
  } = useLoyaltyProgram();
  var labels = useLocalLabels();
  var {
    inputRef
  } = useBarcode({
    value: "" + cardKey,
    options: {
      displayValue: true,
      format: 'CODE39',
      width: 1.8,
      height: 60
    }
  });
  return /*#__PURE__*/React.createElement(NavigationSkeleton, {
    url: "loyalty-program",
    header: "Loyalty program"
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ContentContainer, null, cardKey ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
    isHeader: true
  }, customerGroupLabel), /*#__PURE__*/React.createElement(Text, null, labels.totalPoints, " ", cardSum == null ? void 0 : cardSum.amount), /*#__PURE__*/React.createElement(ProgressBarContainer, {
    width: "200px"
  }, /*#__PURE__*/React.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.createElement(EmojiContainer, null, "\uD83C\uDF89\uD83E\uDD73\uD83C\uDF8A")), /*#__PURE__*/React.createElement(BarcodeWrapper, {
    isActive: Boolean(cardSum == null ? void 0 : cardSum.amount)
  }, /*#__PURE__*/React.createElement("canvas", {
    ref: inputRef
  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
    isHeader: true
  }, labels.noLoyaltyProgram), /*#__PURE__*/React.createElement(BarcodeWrapper, {
    isActive: Boolean(cardSum == null ? void 0 : cardSum.amount)
  }, /*#__PURE__*/React.createElement("canvas", {
    ref: inputRef
  }))))))));
};

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

var Container = styled.div.attrs({
  className: 'pt-3 pb-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 13px;\n  border-bottom: 1px solid #f0f0f0;\n"])));
var Inner = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n"])));
var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  flex: 1;\n"])));
var ContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n\n  @media screen and (max-width: 991px) {\n    flex: 1 1 100%;\n  }\n"])));
var Text = styled.p.attrs({
  className: 'mb-1'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), props => props.isHeader && "\n  font-size: 15px;\n  font-weight: 500;\n  color: " + props.theme.palette.primary + ";\n  ");
var BarcodeWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), props => props.isActive ? 'block' : 'none', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var ProgressBarContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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"])), props => props.width);
var EmojiContainer = styled.span.attrs({
  className: 'pt-3 pb-3'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
//# sourceMappingURL=index.js.map