import React from 'react'
import { TouchableWithoutFeedback, Modal, StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'

/**
 * The Native version of Backdrop utilizes React Native's Modal component for overlaying
 * the app's content, since this is the only reliable to do it. The only drawback of this
 * approach is that a press on the Backdrop will actually stop the press event from propagating,
 * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
 */
export function Backdrop({ onPress, children }) {
  return (
    <Modal transparent>
      <TouchableWithoutFeedback onPress={onPress}>
        <View style={staticStyles.backdrop}>{children}</View>
      </TouchableWithoutFeedback>
    </Modal>
  )
}

Backdrop.propTypes = {
  onPress: PropTypes.func,
  children: PropTypes.node
}

const staticStyles = StyleSheet.create({
  backdrop: {
    flexBasis: '100%',
    backgroundColor: 'rgba(255, 255, 255, 0.5)' // to visually mark that the content beneath is not pressable
  }
})