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

import Wallet from './model';
import BankCom from './BankCom';
import { useTranslation } from 'react-i18next';

export default function BankCardScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { data, loading } = useRequest('/bankCard/my', {
    formatResult: (response) => response.content,
    initialData: [],
    defaultLoading: false,
  });

  navigation.setOptions({
    headerRight: () => (
      <Button
        bg="transparent"
        mx={10}
        onPress={() => navigation.navigate('AddBankCard')}
      >
        <Icon name="plus" color="white" />
      </Button>
    ),
  });

  const { chooseCardId, changeChooseId, setChooseInfo } = useModel(Wallet, [
    'chooseCardId',
  ]);

  return (
    <Div bg="gray100">
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        {data.map((item) => {
          return (
            <BankCom
              key={item.id}
              info={item}
              checked={chooseCardId === item.id}
              onPress={() => {
                changeChooseId(item.id);
                setChooseInfo(item);
                navigation.navigate('WithdrawApply');
              }}
            />
          );
        })}

        {data.length === 0 && !loading && (
          <Div>
            <Text py={30} textAlign="center">
              {t('nothing1')}
            </Text>

            <Button
              alignSelf="center"
              bg="yellow500"
              onPress={() => navigation.navigate('AddBankCard')}
            >
              {t('qu-tian-jia')}
            </Button>
          </Div>
        )}
      </ScrollView>
    </Div>
  );
}