import React from 'react';
import { SafeAreaView } from 'react-native';
import Modal from 'react-native-modal';
import { withTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';

interface Props {
  children: any;
  visible?: boolean;
  onDismiss?: any;
  animationIn?: any;
  animationOut?: any;
  style?: any;
  backdropColor?: string;
  backdropOpacity?: number;
  hasBackdrop?: boolean;
  theme: Theme;
}

/**
 * Specifically support bottom modal as per new component design.
 * @returns Bottom Modal with children JSX passed.
 */

const TBottomModal: React.FC<Props> = ({
  children,
  visible,
  onDismiss,
  animationIn,
  animationOut,
  style,
  backdropColor,
  backdropOpacity,
  hasBackdrop,
}): any => {
  return (
    <Modal
      animationIn={animationIn ? animationIn : 'slideInUp'}
      animationOut={animationOut ? animationOut : 'slideOutDown'}
      style={style}
      backdropColor={backdropColor}
      backdropOpacity={backdropOpacity}
      hideModalContentWhileAnimating={true}
      hasBackdrop={hasBackdrop}
      onBackdropPress={() => {
        onDismiss();
      }}
      onBackButtonPress={() => {
        onDismiss();
      }}
      isVisible={visible}
    >
      <SafeAreaView style={{ backgroundColor: 'transparent' }}>
        {children}
      </SafeAreaView>
    </Modal>
  );
};

export default withTheme(TBottomModal);