import { useNavigation } from '@react-navigation/core';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { hitSlop } from '../../constants';
import { useTheme } from '../../contexts/theme';
import { Screens } from '../../types/navigators';
import { testIdWithKey } from '../../utils/testable';
import Button, { ButtonType } from '../buttons/Button';
const NotificationModal = _ref => {
  let {
    title,
    doneTitle,
    doneType = ButtonType.Primary,
    doneAccessibilityLabel,
    onDone,
    onHome,
    doneVisible = true,
    homeVisible = true,
    testID,
    visible,
    children
  } = _ref;
  const {
    t
  } = useTranslation();
  const navigation = useNavigation();
  const [modalVisible, setModalVisible] = useState(true);
  const {
    ColorPallet,
    TextTheme
  } = useTheme();
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: ColorPallet.brand.primaryBackground
    },
    childContainer: {
      flexGrow: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 25
    },
    buttonContainer: {
      marginBottom: 35,
      marginHorizontal: 20
    },
    iconContainer: {
      width: '100%',
      flexDirection: 'row',
      justifyContent: 'flex-end'
    },
    iconButton: {
      padding: 20,
      paddingVertical: 28
    }
  });
  useEffect(() => {
    if (visible !== undefined) {
      setModalVisible(visible);
    }
  }, [visible]);
  const close = () => {
    setModalVisible(false);
  };
  const closeHome = () => {
    close();
    navigation.navigate(Screens.Home);
  };
  return /*#__PURE__*/React.createElement(Modal, {
    testID: testID,
    visible: modalVisible,
    transparent: true
  }, /*#__PURE__*/React.createElement(SafeAreaView, {
    style: styles.container
  }, homeVisible ? /*#__PURE__*/React.createElement(View, {
    style: styles.iconContainer
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    accessible: true,
    accessibilityLabel: t('Global.Home'),
    accessibilityRole: 'button',
    testID: testIdWithKey('Home'),
    style: styles.iconButton,
    onPress: onHome || closeHome,
    hitSlop: hitSlop
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "home",
    size: 24,
    color: ColorPallet.notification.infoText
  }))) : null, /*#__PURE__*/React.createElement(View, {
    style: styles.childContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: [TextTheme.headingThree, {
      fontWeight: TextTheme.normal.fontWeight,
      textAlign: 'center'
    }]
  }, title), children), doneVisible ? /*#__PURE__*/React.createElement(View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(Button, {
    title: doneTitle || t('Global.Done'),
    accessibilityLabel: doneAccessibilityLabel || t('Global.Done'),
    testID: testIdWithKey('Done'),
    buttonType: doneType,
    onPress: onDone || close
  })) : null));
};
export default NotificationModal;
//# sourceMappingURL=NotificationModal.js.map