"use strict";

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

exports.__esModule = true;
exports.SupportButtons = 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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

var SupportButtons = function SupportButtons(_ref) {
  var data = _ref.data;
  var favCount = (0, _lib.useWishlistTotalCount)() | 0;
  var bagCount = (0, _lib.useBasketTotalCount)();
  return /*#__PURE__*/_react["default"].createElement(Container, null, data.map(function (item) {
    var isBag = item.link === '/basket';
    var isFav = item.link === '/favorites';
    return /*#__PURE__*/_react["default"].createElement(ButtonWrapper, {
      className: "pt-3",
      key: "Item__" + item.link
    }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
      href: item.link
    }, /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(IconWrapper, null, /*#__PURE__*/_react["default"].createElement("img", {
      src: item.icon,
      alt: item.label
    })), /*#__PURE__*/_react["default"].createElement(Label, null, item.label), isBag && bagCount > 0 && /*#__PURE__*/_react["default"].createElement(BagCount, null, bagCount), isFav && favCount > 0 && /*#__PURE__*/_react["default"].createElement(FavCount, null, favCount))));
  }));
};

exports.SupportButtons = SupportButtons;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 50px;\n  margin-left: -6px;\n"])));

var ButtonWrapper = _styledComponents["default"].li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: block;\n"])));

var Wrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 500;\n  display: flex;\n  position: relative;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});

var Label = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 500;\n  line-height: 1.5;\n"])));

var FavCount = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 1000;\n  left: 2.1rem;\n  top: -0.6rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  line-height: 1.5rem;\n  border-radius: 50%;\n  background-color: ", ";\n  color: ", ";\n  text-align: center;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.typography.fontFamily[1];
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.secondary;
});

var BagCount = (0, _styledComponents["default"])(FavCount)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  left: 2.1rem;\n  top: -0.6rem;\n"])));

var IconWrapper = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 3.6rem;\n  text-align: center;\n\n  & img {\n    width: 2.4rem;\n    height: auto;\n  } \n"])));
//# sourceMappingURL=index.js.map