import * as React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import Text from '../Typography/Text';
import Modal from './Modal';
import { withTheme } from '../../core/theming';
import IconButton from '../IconButton/IconButton';
import Button from '../Button';
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, {
    dismissable: dismissable,
    onDismiss: onDismiss,
    visible: rendered,
    contentContainerStyle: [{
      borderRadius: 24,
      backgroundColor: theme.colors.bg.surface
    }, styles.container, style]
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.modalHeader]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [{
      ...theme.fonts.bold
    }, Platform.OS === 'web' && {
      fontFamily: 'Inter'
    }, {
      color: theme.colors.fg.default
    }],
    variant: "Body"
  }, title), /*#__PURE__*/React.createElement(IconButton, {
    icon: "close",
    iconColor: theme.colors.fg.default,
    size: 20,
    onPress: () => {
      hideMessageModal();
    }
  })), /*#__PURE__*/React.createElement(View, {
    style: [styles.innerContainer, style]
  }, children), /*#__PURE__*/React.createElement(View, {
    style: [styles.footer]
  }, /*#__PURE__*/React.createElement(Button, {
    onPress: () => {
      hideMessageModal();
    }
  }, "Close modal"))));
};
const styles = 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: 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
  }
});
export default withTheme(MessageModal);
//# sourceMappingURL=MessageModal.js.map