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; }
import React, { useEffect, useRef, useState } from 'react';
import { useUIDSeed } from 'react-uid';
import { RemoveScroll } from 'react-remove-scroll';
import FocusLock from 'react-focus-lock';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import NormalizedElements from '../../common/NormalizedElements';
import { isFunction } from '../../common/utils';
import { Title } from './Title';
import { Box, Flexbox, OldIcon, ProgressIndicator, Typography, useKeyPress, useMedia } from '../..';
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;
export var FixedDrop = styled(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;
});
export var Backdrop = styled(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, ";");
}, function (p) {
  return p.$blur && 'backdrop-filter: blur(15px); background-color: rgba(0, 0, 0, 0.6) !important;';
});
var Dialog = styled(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 = styled(NormalizedElements.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;");
});
export var Header = styled.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);
});
export var Footer = styled.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);
});
export var StyledProgressIndicator = styled.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);
});
export var StyledBoxTitle = styled(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,
    blurBackdrop = _ref14.blurBackdrop;
  return showBackdrop ? React.createElement(Backdrop, {
    container: true,
    alignItems: "center",
    justifyContent: "center",
    ref: backdropRef,
    onClick: onClick,
    $fullScreenMobile: $fullScreenMobile,
    $blur: blurBackdrop
  }, children) : React.createElement(FixedDrop, {
    container: true,
    alignItems: "center",
    justifyContent: "center"
  }, children);
};
export var 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,
    blurBackdrop = _ref15.blurBackdrop;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    show = _useState2[0],
    setShow = _useState2[1];
  var escapePress = useKeyPress('Escape');
  var isMobile = 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 = useUIDSeed();
  var titleId = seed('ModalTitle');
  var hasHeader = !hideClose || title;
  var backdropRef = useRef(null);
  var dialogRef = useRef(null);
  var handleBackdropClick = function handleBackdropClick(e) {
    if (backdropRef.current && backdropRef.current.contains(e.target) && closeOnBackdropClick && isFunction(onClose)) {
      onClose();
    }
  };
  var handleDialogClick = function handleDialogClick(e) {
    e.stopPropagation();
  };
  useEffect(function () {
    setShow(true);
    return function () {
      setShow(false);
    };
  }, []);
  useEffect(function () {
    if (closeOnEscapePress && escapePress && isFunction(onClose)) {
      onClose();
    }
  }, [closeOnEscapePress, escapePress, onClose]);
  return React.createElement(React.Fragment, null, React.createElement(FocusLock, {
    autoFocus: autoFocus
  }, React.createElement(RemoveScroll, null, React.createElement(BackdropWrapper, {
    showBackdrop: showBackdrop,
    onClick: handleBackdropClick,
    backdropRef: backdropRef,
    $fullScreenMobile: fullScreenMobile,
    blurBackdrop: blurBackdrop
  }, React.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.createElement(StyledProgressIndicator, null, React.createElement(ProgressIndicator, progressIndicator)), hasHeader && React.createElement(Header, {
    $flexTitle: progressIndicatorDescription !== undefined
  }, title && progressIndicatorDescription ? React.createElement(StyledBoxTitle, null, React.createElement(Typography, {
    type: "secondary",
    weight: "bold",
    color: function color(t) {
      return t.colorTokens.neutral.text_weak;
    }
  }, progressIndicatorDescription), React.createElement(Typography, {
    type: isMobile ? 'primary' : 'title2',
    weight: "extrabold",
    color: function color(t) {
      return t.colorTokens.neutral.text_default;
    }
  }, title)) : React.createElement(Title, {
    title: title,
    uid: titleId
  })), children, footer && React.createElement(Footer, null, footer), !hideClose && React.createElement(CloseButton, {
    type: "button",
    onClick: onClose,
    $fullScreenMobile: fullScreenMobile,
    $progressIndicator: progressIndicator
  }, React.createElement(OldIcon.CrossThin, {
    size: 5,
    title: closeTitle,
    stroke: function stroke(t) {
      return t.color.text;
    }
  })))))));
};
ModalInner.displayName = 'ModalInner';