import React from 'react';
import { StyleSheet, View } from 'react-native';
import Modal from 'react-native-modal';

export const ModalProps = {
  avoidKeyboard: true,
  animationIn: "fadeIn",
  animationOut: "fadeOut",
  propagateSwipe: true,
  useNativeDriver: true,
  hideModalContentWhileAnimating: true
}

export default BottomModal = ({visible=false, onHide, children}) => {
  return (
    <Modal
      isVisible={visible}
      onBackButtonPress={onHide}
      onBackdropPress={onHide}
      useNativeDriver={true}
      style={styles.bottomModalView}>
      <View style={styles.bottomModalContent}>
        {children}
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  bottomModalView: {
    margin: 0,
    justifyContent: 'flex-end'
  },
  bottomModalContent: {
    maxHeight: $vht(isIOS ? 92 : 96),
    backgroundColor: pageBackground,
    ...$borderRadius(20, 20, 0, 0)
  },
})