"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledProgressIndicator = exports.StyledBoxTitle = exports.ModalInner = exports.Header = exports.Footer = exports.FixedDrop = exports.Backdrop = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactUid = require("react-uid");
var _reactRemoveScroll = require("react-remove-scroll");
var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _framerMotion = require("framer-motion");
var _NormalizedElements = _interopRequireDefault(require("../../common/NormalizedElements"));
var _utils = require("../../common/utils");
var _Title = require("./Title");
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var PADDING_DESKTOP = 10;
var PADDING_PROGRESS_INDICATOR = 14;
var PADDING_PROGRESS_INDICATOR_MOBILE = 10;
var PADDING_MOBILE = 3;
var PADDING_TOP_MOBILE = 4;
var PADDING_TOP_MOBILE_FULLSCREEN = 5;
var PADDING_BOTTOM_MOBILE_FULLSCREEN = 5;
var CLOSE_ICON_SIZE = 5;
var FixedDrop = exports.FixedDrop = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "ModalInner__FixedDrop",
  componentId: "sc-1ghkydj-0"
})(["position:fixed;top:0;left:0;height:100%;width:100%;z-index:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.zIndex.modal;
});
var Backdrop = exports.Backdrop = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "ModalInner__Backdrop",
  componentId: "sc-1ghkydj-1"
})(["position:fixed;top:0;left:0;height:100%;width:100%;z-index:", ";", ""], function (_ref2) {
  var theme = _ref2.theme;
  return theme.zIndex.modal;
}, function (p) {
  return p.$fullScreenMobile ? "".concat(p.theme.media.greaterThan(p.theme.breakpoints.sm), " {\n        background-color: ").concat(p.theme.color.modalBackdrop, ";\n      }") : "background-color: ".concat(p.theme.color.modalBackdrop, ";");
});
var Dialog = (0, _styledComponents.default)(_framerMotion.motion.div).withConfig({
  displayName: "ModalInner__Dialog",
  componentId: "sc-1ghkydj-2"
})(["box-sizing:border-box;padding:", "px;border:0;background:", ";position:relative;display:flex;flex-direction:column;max-height:100vh;max-width:100%;width:100%;border-radius:", ";", "{", " ", "}", "{padding:", "px;width:", "px;overflow:auto;max-height:65vh;box-shadow:0 2px 2px 0 ", ";}", " ", ""], function (_ref3) {
  var theme = _ref3.theme;
  return theme.spacing.unit(PADDING_MOBILE);
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.color.card;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.borderRadius8;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.media.lessThan(theme.breakpoints.sm);
}, function (p) {
  return p.$fullScreenMobile ? "\n          width: 100%;\n          height: 100%;\n          transform: none !important; /* disables the appear animation */\n          padding-top: ".concat(p.theme.spacing.unit(PADDING_TOP_MOBILE_FULLSCREEN), "px;\n          padding-bottom: ").concat(p.theme.spacing.unit(PADDING_BOTTOM_MOBILE_FULLSCREEN), "px;\n          border-radius: 0px;\n        ") : "margin: ".concat(p.theme.spacing.unit(2), "px;\n           padding-top: ").concat(p.theme.spacing.unit(PADDING_TOP_MOBILE), "px;\n        ");
}, function (p) {
  return p.$fixedBottomMobile ? "\n          bottom: 0;\n          position: fixed;\n          margin: 0;\n          transform: none !important; /* disables the appear animation */\n          padding-top: ".concat(p.theme.spacing.unit(PADDING_TOP_MOBILE_FULLSCREEN), "px;\n          padding-bottom: ").concat(p.theme.spacing.unit(PADDING_BOTTOM_MOBILE_FULLSCREEN), "px;\n          border-radius:  ").concat(p.theme.borderRadius20, " ").concat(p.theme.borderRadius20, " 0 0;\n        ") : '';
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.media.greaterThan(theme.breakpoints.sm);
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.spacing.unit(PADDING_DESKTOP);
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.spacing.unit(100);
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.color.shadowModal;
}, function (_ref11) {
  var theme = _ref11.theme,
    $isStatusModal = _ref11.$isStatusModal;
  return !$isStatusModal && "".concat(theme.media.greaterThan(theme.breakpoints.md), " {\n        width: ").concat(theme.spacing.unit(135), "px;\n      }");
}, function (_ref12) {
  var theme = _ref12.theme,
    $isStatusModal = _ref12.$isStatusModal;
  return $isStatusModal && "".concat(theme.media.greaterThan(theme.breakpoints.lg), " {\n        width: ").concat(theme.spacing.unit(170), "px;\n      }");
});
var CloseButton = (0, _styledComponents.default)(_NormalizedElements.default.Button).withConfig({
  displayName: "ModalInner__CloseButton",
  componentId: "sc-1ghkydj-3"
})(["display:block;background:none;padding:0;border:0;cursor:pointer;position:absolute;transform:translateY(3px);top:", "px;right:", "px;", "{top:", ";right:", "px;}", ""], function (p) {
  return p.$fullScreenMobile ? p.theme.spacing.unit(PADDING_TOP_MOBILE_FULLSCREEN) : p.theme.spacing.unit(PADDING_MOBILE);
}, function (p) {
  return p.theme.spacing.unit(PADDING_MOBILE);
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.media.greaterThan(theme.breakpoints.sm);
}, function (p) {
  return p.$progressIndicator ? "".concat(p.theme.spacing.unit(PADDING_PROGRESS_INDICATOR), "px") : "".concat(p.theme.spacing.unit(PADDING_DESKTOP), "px");
}, function (p) {
  return p.theme.spacing.unit(PADDING_DESKTOP);
}, function (p) {
  return p.$progressIndicator ? "top: ".concat(p.theme.spacing.unit(PADDING_PROGRESS_INDICATOR_MOBILE), "px;") : "top:".concat(p.theme.spacing.unit(PADDING_MOBILE), "px;");
});
var Header = exports.Header = _styledComponents.default.div.withConfig({
  displayName: "ModalInner__Header",
  componentId: "sc-1ghkydj-4"
})(["padding-bottom:", "px;padding-right:", "px;min-height:", "px;"], function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.spacing.unit(CLOSE_ICON_SIZE + 2);
}, function (p) {
  return p.theme.spacing.unit(CLOSE_ICON_SIZE);
});
var Footer = exports.Footer = _styledComponents.default.div.withConfig({
  displayName: "ModalInner__Footer",
  componentId: "sc-1ghkydj-5"
})(["margin-top:auto;padding-top:", "px;flex:0 0 auto;"], function (p) {
  return p.theme.spacing.unit(4);
});
var StyledProgressIndicator = exports.StyledProgressIndicator = _styledComponents.default.div.withConfig({
  displayName: "ModalInner__StyledProgressIndicator",
  componentId: "sc-1ghkydj-6"
})(["> div{position:relative;width:100%;top:0;padding:0;margin-bottom:", "px;> div > div > div{margin:0;}}"], function (p) {
  return p.theme.spacing.unit(1);
});
var StyledBoxTitle = exports.StyledBoxTitle = (0, _styledComponents.default)(_.Box).withConfig({
  displayName: "ModalInner__StyledBoxTitle",
  componentId: "sc-1ghkydj-7"
})(["width:100%;display:flex;flex-direction:column;"]);
var noop = function noop() {};
var BackdropWrapper = function BackdropWrapper(_ref14) {
  var children = _ref14.children,
    showBackdrop = _ref14.showBackdrop,
    backdropRef = _ref14.backdropRef,
    onClick = _ref14.onClick,
    $fullScreenMobile = _ref14.$fullScreenMobile;
  return showBackdrop ? _react.default.createElement(Backdrop, {
    container: true,
    alignItems: "center",
    justifyContent: "center",
    ref: backdropRef,
    onClick: onClick,
    $fullScreenMobile: $fullScreenMobile
  }, children) : _react.default.createElement(FixedDrop, {
    container: true,
    alignItems: "center",
    justifyContent: "center"
  }, children);
};
var ModalInner = exports.ModalInner = function ModalInner(_ref15) {
  var _ref15$autoFocus = _ref15.autoFocus,
    autoFocus = _ref15$autoFocus === void 0 ? false : _ref15$autoFocus,
    children = _ref15.children,
    className = _ref15.className,
    _ref15$closeTitle = _ref15.closeTitle,
    closeTitle = _ref15$closeTitle === void 0 ? 'Close this modal' : _ref15$closeTitle,
    title = _ref15.title,
    onClose = _ref15.onClose,
    progressIndicator = _ref15.progressIndicator,
    progressIndicatorDescription = _ref15.progressIndicatorDescription,
    footer = _ref15.footer,
    _ref15$hideClose = _ref15.hideClose,
    hideClose = _ref15$hideClose === void 0 ? false : _ref15$hideClose,
    _ref15$closeOnBackdro = _ref15.closeOnBackdropClick,
    closeOnBackdropClick = _ref15$closeOnBackdro === void 0 ? false : _ref15$closeOnBackdro,
    _ref15$closeOnEscapeP = _ref15.closeOnEscapePress,
    closeOnEscapePress = _ref15$closeOnEscapeP === void 0 ? true : _ref15$closeOnEscapeP,
    _ref15$fullScreenMobi = _ref15.fullScreenMobile,
    fullScreenMobile = _ref15$fullScreenMobi === void 0 ? true : _ref15$fullScreenMobi,
    _ref15$fixedBottomMob = _ref15.fixedBottomMobile,
    fixedBottomMobile = _ref15$fixedBottomMob === void 0 ? false : _ref15$fixedBottomMob,
    _ref15$isStatusModal = _ref15.isStatusModal,
    isStatusModal = _ref15$isStatusModal === void 0 ? false : _ref15$isStatusModal,
    _ref15$showBackdrop = _ref15.showBackdrop,
    showBackdrop = _ref15$showBackdrop === void 0 ? true : _ref15$showBackdrop,
    onAnimationComplete = _ref15.onAnimationComplete;
  var _useState = (0, _react.useState)(false),
    _useState2 = _slicedToArray(_useState, 2),
    show = _useState2[0],
    setShow = _useState2[1];
  var escapePress = (0, _.useKeyPress)('Escape');
  var isMobile = (0, _.useMedia)(function (t) {
    return t.media.lessThan(t.breakpoints.sm);
  });
  var animationProps = {
    initial: {
      opacity: 0,
      y: 70
    },
    animate: {
      opacity: 1,
      y: 0
    },
    transition: {
      type: 'spring',
      damping: 15,
      stiffness: 200
    }
  };
  var seed = (0, _reactUid.useUIDSeed)();
  var titleId = seed('ModalTitle');
  var hasHeader = !hideClose || title;
  var backdropRef = (0, _react.useRef)(null);
  var dialogRef = (0, _react.useRef)(null);
  var handleBackdropClick = function handleBackdropClick(e) {
    if (backdropRef.current && backdropRef.current.contains(e.target) && closeOnBackdropClick && (0, _utils.isFunction)(onClose)) {
      onClose();
    }
  };
  var handleDialogClick = function handleDialogClick(e) {
    e.stopPropagation();
  };
  (0, _react.useEffect)(function () {
    setShow(true);
    return function () {
      setShow(false);
    };
  }, []);
  (0, _react.useEffect)(function () {
    if (closeOnEscapePress && escapePress && (0, _utils.isFunction)(onClose)) {
      onClose();
    }
  }, [closeOnEscapePress, escapePress, onClose]);
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_reactFocusLock.default, {
    autoFocus: autoFocus
  }, _react.default.createElement(_reactRemoveScroll.RemoveScroll, null, _react.default.createElement(BackdropWrapper, {
    showBackdrop: showBackdrop,
    onClick: handleBackdropClick,
    backdropRef: backdropRef,
    $fullScreenMobile: fullScreenMobile
  }, _react.default.createElement(Dialog, _extends({
    onAnimationComplete: onAnimationComplete || noop,
    "aria-labelledby": titleId,
    className: className,
    role: "dialog"
  }, animationProps, {
    ref: dialogRef,
    onClick: handleDialogClick,
    $show: show,
    $fullScreenMobile: fullScreenMobile,
    $fixedBottomMobile: fixedBottomMobile,
    $isStatusModal: isStatusModal
  }), progressIndicator && _react.default.createElement(StyledProgressIndicator, null, _react.default.createElement(_.ProgressIndicator, progressIndicator)), hasHeader && _react.default.createElement(Header, {
    $flexTitle: progressIndicatorDescription !== undefined
  }, title && progressIndicatorDescription ? _react.default.createElement(StyledBoxTitle, null, _react.default.createElement(_.Typography, {
    type: "secondary",
    weight: "bold",
    color: function color(t) {
      return t.colorTokens.neutral.text_weak;
    }
  }, progressIndicatorDescription), _react.default.createElement(_.Typography, {
    type: isMobile ? 'primary' : 'title2',
    weight: "extrabold",
    color: function color(t) {
      return t.colorTokens.neutral.text_default;
    }
  }, title)) : _react.default.createElement(_Title.Title, {
    title: title,
    uid: titleId
  })), children, footer && _react.default.createElement(Footer, null, footer), !hideClose && _react.default.createElement(CloseButton, {
    type: "button",
    onClick: onClose,
    $fullScreenMobile: fullScreenMobile,
    $progressIndicator: progressIndicator
  }, _react.default.createElement(_.OldIcon.CrossThin, {
    size: 5,
    title: closeTitle,
    stroke: function stroke(t) {
      return t.color.text;
    }
  })))))));
};
ModalInner.displayName = 'ModalInner';