import React from 'react';
import { StyleSheet, Modal, View, Text } from 'react-native';
import Dialog from './Dialog';

const MyModal = ({
  visible=false,
  style=styles.content,
  layerStyle=styles.dialog,
  animationType="fade",
  onLayerPress,
  children
}) => (
  <Modal
    visible={visible}
    transparent={true}
    animationType={animationType}
    statusBarTranslucent={true}>
    <View style={layerStyle}>
      <Text
        style={StyleSheet.absoluteFillObject}
        onPress={onLayerPress}>
      </Text>
      <View style={style}>
        {children}
      </View>
    </View>
  </Modal>
);

export default MyModal;

const styles = StyleSheet.create({
  dialog: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.5)'
  },
  content: {
    width: Dialog.dialogWidth,
    borderRadius: isIOS ? 16 : 8,
    overflow: 'hidden',
    backgroundColor: colorLight
  }
})