import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import * as Animatable from 'react-native-animatable';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { useTranslation } from 'react-i18next';

import { RootStackParamList } from '../types';

export default function AlertModalScreen({
  navigation,
  route,
}: StackScreenProps<RootStackParamList, 'AlertModal'>) {
  const { params } = route;
  const { title, msg, hasCancel, submitText, submitEvent, dangers } = params;
  const { t } = useTranslation();

  return (
    <Div flex={1} bg="black600" alignItems="center" justifyContent="center">
      <Animatable.View animation="slideInUp" duration={300}>
        <Div bg="white" p={10} rounded="sm" minW={287}>
          <Text fontSize="lg" textAlign="center">
            {title || t('ti-shi')}
          </Text>

          <Text
            fontSize="md"
            color={dangers ? 'red500' : 'black'}
            p={10}
            textAlign="center"
          >
            {msg}
          </Text>

          <Div row py={10} mt={10}>
            {hasCancel && (
              <Button
                flex={1}
                mx={3}
                rounded="xs"
                bg="white"
                color="black"
                borderWidth={1}
                borderColor="yellow500"
                fontSize="sm"
                onPress={() => navigation.goBack()}
              >
                {hasCancel ? t('qu-xiao') : submitText || t('que-ren')}
              </Button>
            )}
            <Button
              flex={1}
              mx={3}
              rounded="xs"
              bg="yellow500"
              fontSize="sm"
              onPress={() => {
                if (submitEvent) {
                  submitEvent();
                }
                navigation.goBack();
              }}
            >
              {submitText || t('que-ren')}
            </Button>
          </Div>
        </Div>
      </Animatable.View>
    </Div>
  );
}