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

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

import React from 'react';
import styled, { css, keyframes } from 'styled-components';
import { Modal, useBoolean } from '@sentecacommerce-theme/lib';
import { IconClose } from '../../../../Common';
import { SlideLeft } from '../SlideLeft';
export var ANIMATION_DURATION = 300;
export var AnimatedDrawer = (_ref) => {
  var {
    handleClose,
    showCloseIcon = true,
    showBackdrop = false,
    children,
    onCloseStart,
    isLeft
  } = _ref;
  var [isHiding, setIsHiding] = useBoolean(false);

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

  return /*#__PURE__*/React.createElement(Modal, {
    open: true,
    onClose: hideMenu
  }, /*#__PURE__*/React.createElement(Backdrop, {
    isHiding: isHiding,
    onClick: hideMenu,
    show: showBackdrop
  }), /*#__PURE__*/React.createElement(Container, {
    isHiding: isHiding
  }, /*#__PURE__*/React.createElement(SlideLeft, {
    isLeft: isLeft
  }, showCloseIcon && /*#__PURE__*/React.createElement(CloseButton, {
    onClick: hideMenu
  }, /*#__PURE__*/React.createElement(IconClose, {
    width: "1.2rem"
  })), /*#__PURE__*/React.createElement(Inner, {
    className: "px-4"
  }, typeof children === 'function' ? children(hideMenu) : children))));
};
var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n"])));
var fadeOut = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: translateX(0);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n"])));
var Container = styled.nav(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
}, ANIMATION_DURATION, props => props.isHiding ? fadeOut : fadeIn);
var Inner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  margin-top: 4.6rem;\n  padding-bottom: 15rem;\n"])));
var CloseButton = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center p-1'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -3.4rem;\n  right: 2rem;\n  width: 3rem;\n  height: 3rem;\n  background: ", ";\n  border-radius: 50%;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.whiteSmoke;
});
var showBackdrop = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
var hideBackdrop = keyframes(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n"])));
var Backdrop = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\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"])), props => props.show ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\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