"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

var _templateObject;

var AnimatedBasketCount = function AnimatedBasketCount() {
  var _useState = (0, _react.useState)(false),
      animate = _useState[0],
      setAnimate = _useState[1];

  var bagCount = (0, _lib.useBasketTotalCount)();
  (0, _react.useEffect)(function () {
    setAnimate(true);
    var animateTimeout = setTimeout(function () {
      setAnimate(false);
    }, 400);
    return function () {
      return clearTimeout(animateTimeout);
    };
  }, [bagCount]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, bagCount > 0 && /*#__PURE__*/_react["default"].createElement(Count, null, /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      transform: animate ? 'scale(1.1)' : 'scale(1)'
    }
  }, bagCount)));
};

exports.AnimatedBasketCount = AnimatedBasketCount;

var Count = _styledComponents["default"].span.attrs({
  className: 'd-block'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  z-index: 0;\n  width: 24px;\n  height: 24px;\n\n  & > span {\n    position: absolute;\n\n    z-index: 1;\n    font-family: ", ";\n    font-size: 1.1rem;\n    font-weight: 1000;\n    top: -0.6rem;\n    right: -0.6rem;\n    width: 1.5rem;\n    height: 1.5rem;\n    line-height: 1.6rem;\n    border-radius: 50%;\n    background-color: ", ";\n    color: ", ";\n    color: var(--menu-background);\n    background-color: var(--menu-color);\n    text-align: center;\n\n    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);\n  }\n  &:hover > span {\n    box-shadow: -2px 3px 5px -3px #000;\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.typography.fontFamily[2];
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map