import React, {PropsWithChildren} from 'react'
import {Modal, StyleSheet, TouchableOpacity, ViewProps} from 'react-native'

interface DialogProps extends PropsWithChildren<ViewProps> {
  show: boolean
  hideMask: boolean
  animationType?: 'none' | 'slide' | 'fade'
  onRequestClose: () => void
}

const Dialog = (props: DialogProps) => {
  return (
    <Modal
      transparent={true}
      visible={props.show}
      animationType={props.animationType || 'fade'}
      onRequestClose={props.onRequestClose}>
      <TouchableOpacity
        style={[
          styles.mask,
          {
            backgroundColor: props.hideMask ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.7)',
          },
        ]}
        activeOpacity={1}
        onPress={props.onRequestClose}>
        {props.children}
      </TouchableOpacity>
    </Modal>
  )
}

const styles = StyleSheet.create({
  mask: {
    flex: 1,
  },
})

export default Dialog