import { ModalProps, Platform, Modal, View, StyleProp, ViewStyle, StyleSheet } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useChatContext } from '../contexts/chat_context'

interface CustomModalProps extends ModalProps {
  containerStyle?: StyleProp<ViewStyle>
}

export function SafeAreaModal(props: CustomModalProps) {
  const { edgeToEdge = true } = useChatContext()
  const styles = useModalStyles(props)

  return (
    <Modal statusBarTranslucent={edgeToEdge} navigationBarTranslucent={edgeToEdge} {...props}>
      <View style={[props.containerStyle, styles.container]}>{props.children}</View>
    </Modal>
  )
}

const useModalStyles = ({ presentationStyle }: CustomModalProps) => {
  const insets = useSafeAreaInsets()
  const isAndroid = Platform.OS === 'android'
  const extendsToTop =
    isAndroid || ['pageSheet', 'formSheet'].every(style => style !== presentationStyle)
  const paddingTop = extendsToTop ? insets.top : 0

  return StyleSheet.create({
    container: { paddingTop, paddingBottom: insets.bottom, flex: 1 },
  })
}