"use strict";

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

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

exports.__esModule = true;
exports.AnimatedDrawer = exports.ANIMATION_DURATION = void 0;

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

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

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

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

var _Common = require("../../../../Common");

var _SlideLeft = require("../SlideLeft");

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

var ANIMATION_DURATION = 300;
exports.ANIMATION_DURATION = ANIMATION_DURATION;

var AnimatedDrawer = function AnimatedDrawer(_ref) {
  var handleClose = _ref.handleClose,
      _ref$showCloseIcon = _ref.showCloseIcon,
      showCloseIcon = _ref$showCloseIcon === void 0 ? true : _ref$showCloseIcon,
      _ref$showBackdrop = _ref.showBackdrop,
      showBackdrop = _ref$showBackdrop === void 0 ? false : _ref$showBackdrop,
      children = _ref.children,
      onCloseStart = _ref.onCloseStart,
      isLeft = _ref.isLeft;

  var _useBoolean = (0, _lib.useBoolean)(false),
      isHiding = _useBoolean[0],
      setIsHiding = _useBoolean[1];

  var hideMenu = function hideMenu() {
    setIsHiding.on();
    onCloseStart == null ? void 0 : onCloseStart();
    setTimeout(handleClose, ANIMATION_DURATION);
  };

  return /*#__PURE__*/_react["default"].createElement(_lib.Modal, {
    open: true,
    onClose: hideMenu
  }, /*#__PURE__*/_react["default"].createElement(Backdrop, {
    isHiding: isHiding,
    onClick: hideMenu,
    show: showBackdrop
  }), /*#__PURE__*/_react["default"].createElement(Container, {
    isHiding: isHiding
  }, /*#__PURE__*/_react["default"].createElement(_SlideLeft.SlideLeft, {
    isLeft: isLeft
  }, showCloseIcon && /*#__PURE__*/_react["default"].createElement(CloseButton, {
    onClick: hideMenu
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconClose, {
    width: "1.2rem"
  })), /*#__PURE__*/_react["default"].createElement(Inner, {
    className: "px-4"
  }, typeof children === 'function' ? children(hideMenu) : children))));
};

exports.AnimatedDrawer = AnimatedDrawer;
var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n"])));
var fadeOut = (0, _styledComponents.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  0% {\n    transform: translateX(0);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n"])));

var Container = _styledComponents["default"].nav(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  z-index: 9000;\n  background: ", ";\n  position: fixed;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  max-width: 32rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  height: 100%;\n  transform: translateX(100%);\n  box-shadow: inset 1px 0 0 0 #e5e5e5;\n  display: block;\n\n  animation: ", "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1\n    normal forwards running ", ";\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
}, ANIMATION_DURATION, function (props) {
  return props.isHiding ? fadeOut : fadeIn;
});

var Inner = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 4.6rem;\n  padding-bottom: 15rem;\n"])));

var CloseButton = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center p-1'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: -3.4rem;\n  right: 2rem;\n  width: 3rem;\n  height: 3rem;\n  background: ", ";\n  border-radius: 50%;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.whiteSmoke;
});

var showBackdrop = (0, _styledComponents.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
var hideBackdrop = (0, _styledComponents.keyframes)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n"])));

var Backdrop = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  top: 0;\n  opacity: 0;\n  z-index: 8000;\n  background-color: hsla(0, 0%, 7%, 0.36);\n  backdrop-filter: blur(3px);\n  ", "\n"])), function (props) {
  return props.show ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n          animation: ", "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s\n            1 normal forwards running\n            ", ";\n        "])), ANIMATION_DURATION, props.isHiding ? hideBackdrop : showBackdrop) : '';
});
//# sourceMappingURL=index.js.map