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

import { useRequest } from 'ahooks';

import { connect } from '../utils/SystemUtils';
import {
  addAsyncStorage,
  removeAsyncStorage,
} from '../utils/AsyncStorageUtils';

const img1 = require('../assets/images/autoimg1.png');
const img2 = require('../assets/images/autoimg2.png');

export default function AuditResultScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { data, refresh, loading } = useRequest('/rider/my');
  const { status, jobNumber } = data || {};

  React.useEffect(() => {
    if (status === 'PENDING') {
      addAsyncStorage('riderIsApply', 'true');
    }
  }, [status]);
  return (
    <Div bg="white" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
        }}
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={refresh} />
        }
      >
        <Image source={status === 'PASS' ? img2 : img1} w={91} h={78} mt={40} />
        {status === 'PENDING' && (
          <Div alignItems="center" py={30}>
            <Text color="gray600" fontSize="xl">
              {t('nin-de-shen-qing-yi-ti-jiao-cheng-gong')}
            </Text>
            <Text color="gray600" fontSize="xl">
              {t('qing-nai-xin-deng-dai')}...
            </Text>
          </Div>
        )}

        {status === 'DENY' && (
          <>
            <Div alignItems="center" py={30}>
              <Text color="gray600" fontSize="xl">
                {t('failresult')}
              </Text>
              <Text color="gray600" fontSize="xl">
                {t('failresult2')}
              </Text>
            </Div>

            <Button
              bg="yellow500"
              fontSize="sm"
              w={112}
              alignSelf="center"
              onPress={() => {
                navigation.navigate('Certification');
              }}
            >
              {t('zhong-xin-shen-qing')}
            </Button>
          </>
        )}

        {status === 'PASS' && (
          <>
            <Div alignItems="center" py={30}>
              <Text color="yellow500" fontSize="xl">
                {t('gong-xi-nin-de-shen-qing-yi-tong-guo')}
              </Text>
              <Text color="yellow500" fontSize="xl">
                {t('nin-de-gong-hao-wei')}：{jobNumber}
              </Text>
            </Div>

            <Button
              bg="yellow500"
              fontSize="sm"
              w={112}
              alignSelf="center"
              onPress={() => {
                removeAsyncStorage('riderIsApply');
                navigation.dispatch(StackActions.replace('MainStack'));
              }}
            >
              完成
            </Button>
          </>
        )}

        <Div flex={1} w={10} />
        <Button
          w={112}
          color="yellow500"
          bg="none"
          borderColor="gray100"
          borderWidth={1}
          alignSelf="center"
          fontSize="sm"
          my={20}
          onPress={() => connect(navigation)}
        >
          {t('lian-xi-ke-fu')}
        </Button>
      </ScrollView>
    </Div>
  );
}