// Custom modal component
// --------------------------------------------------
// Props:
// - children: content to display
// - visible: whether modal is visible
// - style: style of modal
// - animationType: animation type of modal
// - transparent: whether modal is transparent
// - onClose: function to call when modal is closed
//

import React from 'react'
import { Modal as RNModal, StyleSheet, View, ScrollView } from 'react-native'
import { borderRadius, colors, spacing } from '../theme'
import { TouchableWithoutFeedback } from 'react-native'

const Modal = ({
  children,
  visible,
  style,
  animationType = 'fade',
  transparent = true,
  onClose,
}) => {
  const modalStyle = {
    backgroundColor: colors.white,
    borderRadius: borderRadius.br_2,
    elevation: 8,
    padding: spacing.s_3,
    width: '80%',
    minHeight: '50%',
    maxHeight: '80%',
    overflow: 'scroll',
  }

  return (
    <RNModal
      visible={visible}
      animationType={animationType}
      transparent={transparent}
      // onRequestClose={onClose}
    >
      <TouchableWithoutFeedback onPress={onClose}>
        <View style={styles.backdrop} />
      </TouchableWithoutFeedback>
      <View style={styles.container}>
        <View style={[modalStyle, style]}>
          <ScrollView>{children}</ScrollView>
        </View>
      </View>
    </RNModal>
  )
}

const styles = StyleSheet.create({
  backdrop: {
    // flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

export default Modal