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

export default function InputModalScreen({
  navigation,
  route,
}: StackScreenProps) {
  const { params } = route;
  const { title,secureTextEntry, defaultVal, hasCancel, submitText, submitEvent, tips } =
    params || {};
  const { t } = useTranslation();

  const [val, setVal] = React.useState<string>('');

  const inRef = React.useRef();

  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>

          <Input
            autoFocus={true}
            defaultValue={defaultVal}
            mt={10}
            opacity={1}
            loaderColor="gray400"
            color="gray900"
            secureTextEntry={secureTextEntry}
            onChangeText={(text) => setVal(text)}
          />

          <Text color="gray500" textAlign="center" mt={3}>
            {tips}
          </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(val);
                }
                navigation.goBack();
              }}
            >
              {submitText || t('que-ren')}
            </Button>
          </Div>
        </Div>
      </Animatable.View>
    </Div>
  );
}