"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Text = _interopRequireDefault(require("../Typography/Text"));
var _Modal = _interopRequireDefault(require("./Modal"));
var _theming = require("../../core/theming");
var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
var _Button = _interopRequireDefault(require("../Button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const MessageModal = _ref => {
  let {
    children,
    dismissable = true,
    onDismiss,
    visible = false,
    style,
    title,
    theme
  } = _ref;
  const [rendered, setRendered] = React.useState(visible);
  React.useEffect(() => {
    setRendered(visible);
  }, [visible]);
  if (visible && !rendered) {
    setRendered(true);
  }
  const hideMessageModal = () => {
    onDismiss && onDismiss();
    setRendered(false);
  };
  return /*#__PURE__*/React.createElement(_Modal.default, {
    dismissable: dismissable,
    onDismiss: onDismiss,
    visible: rendered,
    contentContainerStyle: [{
      borderRadius: 24,
      backgroundColor: theme.colors.bg.surface
    }, styles.container, style]
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: {
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.modalHeader]
  }, /*#__PURE__*/React.createElement(_Text.default, {
    style: [{
      ...theme.fonts.bold
    }, _reactNative.Platform.OS === 'web' && {
      fontFamily: 'Inter'
    }, {
      color: theme.colors.fg.default
    }],
    variant: "Body"
  }, title), /*#__PURE__*/React.createElement(_IconButton.default, {
    icon: "close",
    iconColor: theme.colors.fg.default,
    size: 20,
    onPress: () => {
      hideMessageModal();
    }
  })), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.innerContainer, style]
  }, children), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.footer]
  }, /*#__PURE__*/React.createElement(_Button.default, {
    onPress: () => {
      hideMessageModal();
    }
  }, "Close modal"))));
};
const styles = _reactNative.StyleSheet.create({
  container: {
    /**
     * This prevents the shadow from being clipped on Android since Android
     * doesn't support `overflow: visible`.
     * One downside for this fix is that it will disable clicks on the area
     * of the shadow around the dialog, consequently, if you click around the
     * dialog (44 pixel from the top and bottom) it won't be dismissed.
     */
    marginVertical: _reactNative.Platform.OS === 'android' ? 44 : 0,
    // marginHorizontal: 26,
    elevation: 24,
    justifyContent: 'flex-start',
    padding: 24,
    width: '100%'
  },
  innerContainer: {},
  modalHeader: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingBottom: 16
  },
  footer: {
    paddingVertical: 16
  }
});
var _default = (0, _theming.withTheme)(MessageModal);
exports.default = _default;
//# sourceMappingURL=MessageModal.js.map