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

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

import { applyMap } from '../utils/MoneyUtils';
import { getMoney } from '../utils/SystemUtils';
import { useTranslation } from 'react-i18next';

const logo = require('../assets/images/logo2.png');
const next = require('../assets/images/next.png');
export default function WithdrawResultScreen({
  navigation,
  route,
}: StackScreenProps) {
  const { t } = useTranslation();
  const { params } = route;
  const { id } = params || {};
  const { data, loading, refresh } = useRequest('/withdrawApply/get/' + id, {
    defaultLoading: false,
  });

  const statusInfo = useCreation(() => {
    if (data) {
      return applyMap.get(data.status);
    } else {
      return {};
    }
  }, [data]);

  const bankCard = useCreation(() => {
    if (data) {
      return data.bankCard || {};
    } else {
      return {};
    }
  }, [data]);

  return (
    <Div bg="gray100" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={refresh} />
        }
      >
        <Div row bg="white" alignItems="center" pl={31} pr={52} pt={10}>
          <Image source={logo} w={66} h={66} />
          <Div flex={1} h={2} bg="yellow500" />
          <Image source={next} w={33} h={33} />
          <Div flex={1} h={2} bg={statusInfo.color} />
          <Icon
            name={statusInfo.icon}
            color={statusInfo.color}
            fontSize="6xl"
          />
        </Div>
        <Text bg="white" textAlign="center" py={10}>
          {t(statusInfo.name)}
        </Text>

        {!!data && (
          <Div p={15} bg="white" mt={10}>
            <Div row py={2} justifyContent="space-between">
              <Text>{t('shen-qing-shi-jian')}</Text>
              <Text>{data.withdrawTime}</Text>
            </Div>
            <Div row py={2} justifyContent="space-between">
              <Text>{t('yin-hang-ka')}</Text>
              <Text>
                {bankCard.bankName} ({bankCard.cardNo})
              </Text>
            </Div>
            <Div row py={2} justifyContent="space-between">
              <Text>{t('ti-xian-jin-e')}</Text>
              <Text>¥{getMoney(data.amount)}</Text>
            </Div>
          </Div>
        )}
      </ScrollView>
    </Div>
  );
}