nomadmania-app/src/components/WarningModal/index.tsx

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Modal from 'react-native-modal';

import { styles } from './styles';
import CloseIcon from '../../../assets/icons/close.svg';
import { Colors } from 'src/theme';

import { useNavigation } from '@react-navigation/native';
import { NAVIGATION_PAGES } from 'src/types';
import { ButtonVariants } from 'src/types/components';
import { Button } from '../Button';

export const WarningModal = ({
  isVisible,
  onClose,
  type,
  message,
  title,
  action
}: {
  isVisible: boolean;
  onClose: () => void;
  type: string;
  message?: string;
  title?: string;
  action?: () => void;
}) => {
  const navigation = useNavigation();

  const content = {
    offline: {
      message: 'Please check your Internet connection and try again.',
      buttons: [
        {
          text: 'OK',
          textColor: Colors.WHITE,
          color: Colors.DARK_BLUE,
          action: onClose,
          borderColor: Colors.DARK_BLUE
        }
      ]
    },
    unauthorized: {
      message: 'To use this feature you need to have an account with NomadMania.',
      buttons: [
        {
          text: 'Login',
          textColor: Colors.DARK_BLUE,
          color: Colors.WHITE,
          action: () => {
            onClose();
            navigation.navigate(NAVIGATION_PAGES.LOGIN as never);
          },
          borderColor: Colors.DARK_BLUE
        },
        {
          text: 'Register',
          textColor: Colors.WHITE,
          color: Colors.DARK_BLUE,
          action: () => {
            onClose();
            navigation.navigate(NAVIGATION_PAGES.REGISTER as never);
          },
          borderColor: Colors.DARK_BLUE
        }
      ]
    },
    delete: {
      message,
      buttons: [
        {
          text: 'No',
          textColor: Colors.DARK_BLUE,
          color: Colors.WHITE,
          action: () => {
            onClose();
          },
          borderColor: Colors.DARK_BLUE
        },
        {
          text: 'Delete',
          textColor: Colors.WHITE,
          color: Colors.RED,
          action: () => {
            onClose();
            action && action();
          },
          borderColor: Colors.RED
        }
      ]
    },
    success: {
      message,
      buttons: [
        {
          text: 'OK',
          textColor: Colors.WHITE,
          color: Colors.ORANGE,
          action: onClose,
          borderColor: Colors.ORANGE
        },
      ]
    }
  };

  const modalContent = content[type as keyof typeof content] || {};

  return (
    <Modal isVisible={isVisible}>
      <View style={styles.centeredView}>
        <View style={styles.modalView}>
          <View style={{ alignSelf: 'flex-end' }}>
            <TouchableOpacity onPress={onClose}>
              <CloseIcon fill={Colors.LIGHT_GRAY} />
            </TouchableOpacity>
          </View>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>{title ?? 'Oops!'}</Text>
            <Text style={styles.modalText}>{modalContent.message}</Text>
            <View style={styles.buttonContainer}>
              {modalContent.buttons.map(
                (
                  button: {
                    text: string;
                    textColor: string;
                    color: string;
                    action: () => void;
                    borderColor: string;
                  },
                  idx: number
                ) => (
                  <Button
                    key={idx}
                    variant={ButtonVariants.OPACITY}
                    containerStyles={{
                      borderColor: button.borderColor,
                      backgroundColor: button.color,
                      width: type === 'offline' ? '60%' : '45%'
                    }}
                    textStyles={{
                      color: button.textColor
                    }}
                    onPress={button.action}
                    children={button.text}
                  />
                )
              )}
            </View>
          </View>
        </View>
      </View>
    </Modal>
  );
};