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

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

import React, { useCallback, useRef, useState, useEffect } from 'react';
import { Modal, OverflowHidden, readFromLocalStorage, useBoolean } from '@sentecacommerce-theme/lib';
import { IconClose, Typography } from '../';
import styled from 'styled-components';
var ANIMATION_TIMEOUT = 600;
var DRAG_SENSITIVITY = 80;
var MIN_Y_POSITION = 50;
export var AnimatedModal = (_ref) => {
  var {
    onClose,
    title,
    isContentDisabled,
    children,
    mobileHeight,
    isRoot = false,
    bottom,
    disableAnimations
  } = _ref;
  var [isHiding, setIsHiding] = useState(false);
  var startPositionYRef = useRef(null);
  var shouldHideRef = useRef(false);
  var disableRef = useRef(false);
  var modalContainerRef = useRef(null);
  var handleClose = useCallback(e => {
    e == null ? void 0 : e.preventDefault();
    setIsHiding(true);
    window.localStorage.removeItem('DropdownSelect__isSelecting');
    window.localStorage.removeItem('AutocompleteFilter__isSelecting');
    window.localStorage.removeItem('scrollPosition');
    setTimeout(() => {
      onClose();
    }, ANIMATION_TIMEOUT + 30);
  }, [onClose]);
  var handleTouchMove = useCallback(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 = useCallback(e => {
    if (disableRef.current || !modalContainerRef.current) return;
    startPositionYRef.current = e.touches[0].clientY;
  }, []);
  var handleTouchEnd = useCallback(() => {
    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(() => {
      // remove transition
      if (modalContainerRef.current) modalContainerRef.current.style.transition = '';
      disableRef.current = false;
    }, ANIMATION_TIMEOUT);
  }, [handleClose]);
  var [stopBlink, setstopBlink] = useBoolean();
  useEffect(() => {
    if (disableAnimations) {
      readFromLocalStorage('Modal__isSelecting') ? setstopBlink.on() : setstopBlink.off();
    }
  }, []);
  return /*#__PURE__*/React.createElement(Modal, {
    zIndex: 999,
    onClose: handleClose,
    open: true
  }, /*#__PURE__*/React.createElement("div", {
    tabIndex: 0
  }), /*#__PURE__*/React.createElement(Backdrop, {
    onClick: handleClose,
    isHiding: isHiding,
    stopBlink: stopBlink
  }), /*#__PURE__*/React.createElement(Animated, {
    mobileHeight: mobileHeight,
    isHiding: isHiding,
    stopBlink: stopBlink
  }, /*#__PURE__*/React.createElement(Container, {
    mobileHeight: mobileHeight,
    ref: modalContainerRef
  }, /*#__PURE__*/React.createElement(DragHandler, {
    onTouchStart: handleTouchStart,
    onTouchMove: handleTouchMove,
    onTouchEnd: handleTouchEnd
  }, /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement(CloseButton, {
    "aria-label": "Close Modal",
    onClick: handleClose
  }, /*#__PURE__*/React.createElement(IconClose, null))), /*#__PURE__*/React.createElement(Content, {
    isDisabled: isContentDisabled
  }, children, bottom && /*#__PURE__*/React.createElement(BottomContainer, null, /*#__PURE__*/React.createElement(BottomWrapper, null, bottom({
    closeModal: handleClose
  })))))), /*#__PURE__*/React.createElement("div", {
    tabIndex: 0
  }), isRoot && /*#__PURE__*/React.createElement(OverflowHidden, null));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.sm.max;
});
var BottomContainer = styled.div.attrs({
  className: 'd-md-none'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  height: 10rem;\n"])));
var BottomWrapper = styled.div.attrs({
  className: 'p-3'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: absolute;\n  z-index: 9;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  border-top: 0.1rem solid ", ";\n\n  transform: translateY(-", "rem);\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
}, MIN_Y_POSITION / 10);
var DragHandler = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center d-md-none'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.light;
});
var Animated = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  z-index: 200;\n  @media (max-width: ", ") {\n    ", "\n    transition: all 1s ease-in-out;\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"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.sm.max;
}, (_ref8) => {
  var {
    stopBlink,
    isHiding
  } = _ref8;
  return stopBlink ? "transform: translateY(" + MIN_Y_POSITION + "px);" : "\n        animation: " + ANIMATION_TIMEOUT + "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1\n        normal forwards running animation-filters-model-" + (isHiding ? 'hide' : 'show') + ";\n      ";
}, props => props.mobileHeight ? "min(100%, calc(" + props.mobileHeight + " + 18rem))" : '100%', MIN_Y_POSITION, MIN_Y_POSITION, (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.breakpoints.md.min;
}, ANIMATION_TIMEOUT, props => props.isHiding ? 'hide' : 'show');
var Header = styled(Typography).attrs({
  variant: 4,
  className: 'd-flex justify-content-between align-items-center'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  padding: 2rem 3rem;\n  line-height: 1;\n\n  border-bottom: 0.1rem solid ", ";\n"])), (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.palette.light;
});
var Content = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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"])), props => props.isDisabled ? '0.6' : 1, (_ref11) => {
  var {
    theme
  } = _ref11;
  return theme.breakpoints.md.min;
});
var CloseButton = styled.button.attrs({
  className: 'p-1 d-block'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\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"])), (_ref12) => {
  var {
    theme
  } = _ref12;
  return theme.palette.light;
});
var Backdrop = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 200;\n  background-color: ", ";\n  opacity: 0;\n  transition: all 0.5s;\n  ", "\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"])), (_ref13) => {
  var {
    theme
  } = _ref13;
  return theme.palette.primary;
}, (_ref14) => {
  var {
    stopBlink,
    isHiding
  } = _ref14;
  return stopBlink ? "opacity: 0.4;" : "animation: " + ANIMATION_TIMEOUT + "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal\n    forwards running animation-backdrop-" + (isHiding ? 'hide' : 'show') + ";";
});
//# sourceMappingURL=index.js.map