"use strict";

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

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

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

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

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

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

var _ = require("../");

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

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

var ANIMATION_TIMEOUT = 600;
var DRAG_SENSITIVITY = 80;
var MIN_Y_POSITION = 50;

var AnimatedModal = function AnimatedModal(_ref) {
  var onClose = _ref.onClose,
      title = _ref.title,
      isContentDisabled = _ref.isContentDisabled,
      children = _ref.children,
      mobileHeight = _ref.mobileHeight,
      _ref$isRoot = _ref.isRoot,
      isRoot = _ref$isRoot === void 0 ? false : _ref$isRoot,
      bottom = _ref.bottom;

  var _useState = (0, _react.useState)(false),
      isHiding = _useState[0],
      setIsHiding = _useState[1];

  var startPositionYRef = (0, _react.useRef)(null);
  var shouldHideRef = (0, _react.useRef)(false);
  var disableRef = (0, _react.useRef)(false);
  var modalContainerRef = (0, _react.useRef)(null);
  var handleClose = (0, _react.useCallback)(function (e) {
    e == null ? void 0 : e.preventDefault();
    setIsHiding(true);
    setTimeout(function () {
      onClose();
    }, ANIMATION_TIMEOUT + 30);
  }, [onClose]);
  var handleTouchMove = (0, _react.useCallback)(function (e) {
    if (!modalContainerRef.current || disableRef.current) return;
    var currentY = e.touches[0].clientY; // prevent unwanted cases

    if (startPositionYRef.current === null) {
      startPositionYRef.current = currentY;
    }

    var startY = startPositionYRef.current;
    var newY = currentY - startY;

    if (-MIN_Y_POSITION > newY) {
      newY = -MIN_Y_POSITION;
    }

    modalContainerRef.current.style.transform = "translateY(" + newY + "px)"; // modal should hide if drag is bigger then DRAG_SENSITIVITY

    if (newY > DRAG_SENSITIVITY) {
      shouldHideRef.current = true;
      return;
    }

    shouldHideRef.current = false;
  }, []);
  var handleTouchStart = (0, _react.useCallback)(function (e) {
    if (disableRef.current || !modalContainerRef.current) return;
    startPositionYRef.current = e.touches[0].clientY;
  }, []);
  var handleTouchEnd = (0, _react.useCallback)(function () {
    if (!modalContainerRef.current || disableRef.current) return; // disable events

    disableRef.current = true; // reset start position

    startPositionYRef.current = null; // close modal

    if (shouldHideRef.current) {
      handleClose();
      return;
    } // reset state with transition;


    modalContainerRef.current.style.transition = "transform " + ANIMATION_TIMEOUT + "ms cubic-bezier(0.25, 0.1, 0.25, 1)";
    modalContainerRef.current.style.transform = "translateY(0)";
    setTimeout(function () {
      // remove transition
      if (modalContainerRef.current) modalContainerRef.current.style.transition = '';
      disableRef.current = false;
    }, ANIMATION_TIMEOUT);
  }, [handleClose]);
  return /*#__PURE__*/_react["default"].createElement(_lib.Modal, {
    zIndex: 999,
    onClose: handleClose,
    open: true
  }, /*#__PURE__*/_react["default"].createElement("div", {
    tabIndex: 0
  }), /*#__PURE__*/_react["default"].createElement(Backdrop, {
    onClick: handleClose,
    isHiding: isHiding
  }), /*#__PURE__*/_react["default"].createElement(Animated, {
    mobileHeight: mobileHeight,
    isHiding: isHiding
  }, /*#__PURE__*/_react["default"].createElement(Container, {
    mobileHeight: mobileHeight,
    ref: modalContainerRef
  }, /*#__PURE__*/_react["default"].createElement(DragHandler, {
    onTouchStart: handleTouchStart,
    onTouchMove: handleTouchMove,
    onTouchEnd: handleTouchEnd
  }, /*#__PURE__*/_react["default"].createElement("span", null)), /*#__PURE__*/_react["default"].createElement(Header, null, /*#__PURE__*/_react["default"].createElement("span", null, title), /*#__PURE__*/_react["default"].createElement(CloseButton, {
    "aria-label": "Close Modal",
    onClick: handleClose
  }, /*#__PURE__*/_react["default"].createElement(_.IconClose, null))), /*#__PURE__*/_react["default"].createElement(Content, {
    isDisabled: isContentDisabled
  }, children, bottom && /*#__PURE__*/_react["default"].createElement(BottomContainer, null, /*#__PURE__*/_react["default"].createElement(BottomWrapper, null, bottom({
    closeModal: handleClose
  })))))), /*#__PURE__*/_react["default"].createElement("div", {
    tabIndex: 0
  }), isRoot && /*#__PURE__*/_react["default"].createElement(_lib.OverflowHidden, null));
};

exports.AnimatedModal = AnimatedModal;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background-color: ", ";\n  width: 100%;\n  height: 100%;\n  position: relative;\n\n  @media (max-width: ", ") {\n    border-radius: 0.8rem 0.8rem 0 0;\n    padding-top: 1rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.sm.max;
});

var BottomContainer = _styledComponents["default"].div.attrs({
  className: 'd-md-none'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 10rem;\n"])));

var BottomWrapper = _styledComponents["default"].div.attrs({
  className: 'p-3'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background-color: ", ";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  border-top: 0.1rem solid ", ";\n\n  transform: translateY(-", "rem);\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.secondary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.light;
}, MIN_Y_POSITION / 10);

var DragHandler = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center d-md-none'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  height: 2.4rem;\n\n  position: absolute;\n  left: 0;\n  top: 0;\n\n  & > span {\n    display: block;\n    width: 6rem;\n    height: 0.6rem;\n    border-radius: 2rem;\n\n    background-color: ", ";\n  }\n\n  &:after,\n  &:before {\n    content: '';\n    display: block;\n    left: 0;\n    position: absolute;\n    width: 100%;\n  }\n\n  &:after {\n    top: -1rem;\n    height: 1rem;\n  }\n\n  &:before {\n    height: 1.6rem;\n    top: 1.6rem;\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.light;
});

var Animated = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  right: 0;\n  z-index: 200;\n\n  @media (max-width: ", ") {\n    animation: ", "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1\n      normal forwards running animation-filters-model-", ";\n    bottom: 0;\n    height: ", ";\n\n    border-radius: 0.8rem 0.8rem 0 0;\n    width: 100%;\n\n    @keyframes animation-filters-model-show {\n      0% {\n        transform: translateY(100%);\n      }\n\n      100% {\n        transform: translateY(", "px);\n      }\n    }\n\n    @keyframes animation-filters-model-hide {\n      0% {\n        transform: translateY(", "px);\n      }\n\n      100% {\n        transform: translateY(100%);\n      }\n    }\n  }\n\n  @media (min-width: ", ") {\n    animation: ", "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1\n      normal forwards running animation-filters-model-", ";\n\n    height: 100%;\n    width: 41rem;\n    top: 0;\n\n    @keyframes animation-filters-model-show {\n      0% {\n        transform: translateX(100%);\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    @keyframes animation-filters-model-hide {\n      0% {\n        transform: translateX(0);\n      }\n\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.sm.max;
}, ANIMATION_TIMEOUT, function (props) {
  return props.isHiding ? 'hide' : 'show';
}, function (props) {
  return props.mobileHeight ? "min(100%, calc(" + props.mobileHeight + " + 18rem))" : '100%';
}, MIN_Y_POSITION, MIN_Y_POSITION, function (_ref8) {
  var theme = _ref8.theme;
  return theme.breakpoints.md.min;
}, ANIMATION_TIMEOUT, function (props) {
  return props.isHiding ? 'hide' : 'show';
});

var Header = (0, _styledComponents["default"])(_.Typography).attrs({
  variant: 4,
  className: 'd-flex justify-content-between align-items-center'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: 2rem 3rem;\n  line-height: 1;\n\n  border-bottom: 0.1rem solid ", ";\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.light;
});

var Content = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  opacity: ", ";\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: calc(100% - 11.2rem);\n  height: calc(100% - 11.2rem);\n\n  @media (min-width: ", ") {\n    max-height: calc(100% - 6.7rem);\n    height: calc(100% - 6.7rem);\n  }\n"])), function (props) {
  return props.isDisabled ? '0.6' : 1;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.breakpoints.md.min;
});

var CloseButton = _styledComponents["default"].button.attrs({
  className: 'p-1 d-block'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 0 !important;\n  line-height: 1 !important;\n  border-radius: 50%;\n  width: 2.6rem;\n  height: 2.6rem;\n  margin-right: -0.8rem;\n  & > svg {\n    width: 1rem;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref11) {
  var theme = _ref11.theme;
  return theme.palette.light;
});

var Backdrop = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 200;\n  background-color: ", ";\n  animation: ", "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal\n    forwards running animation-backdrop-", ";\n\n  @keyframes animation-backdrop-show {\n    0% {\n      opacity: 0;\n    }\n\n    100% {\n      opacity: 0.4;\n    }\n  }\n\n  @keyframes animation-backdrop-hide {\n    0% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"])), function (_ref12) {
  var theme = _ref12.theme;
  return theme.palette.primary;
}, ANIMATION_TIMEOUT, function (props) {
  return props.isHiding ? 'hide' : 'show';
});
//# sourceMappingURL=index.js.map