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

import useModel from 'flooks';
import { useCreation } from 'ahooks';

import Wallet from './model';
import User from '../stores/User';
import BankCom from './BankCom';

import { getMoney } from '../utils/SystemUtils';
import request from '../utils/RequestUtils';
import { toastShow, toastSuccess, toastInfo } from '../utils/SystemUtils';
import { useTranslation } from 'react-i18next';

function saveApply(amount, bankCardId) {
  return request.post('/withdrawApply/apply', {
    data: {
      amount,
      bankCardId,
    },
    requestType: 'form',
  });
}

export default function WithdrawApplyScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { chooseCardId, chooseInfo } = useModel(Wallet, [
    'chooseInfo',
    'chooseCardId',
  ]);

  const [money, setmoney] = React.useState<string>('');
  const { userInfo } = useModel(User, ['userInfo']);

  const error = useCreation(() => {
    if (Number(money) > Number(userInfo.money)) {
      return true;
    } else {
      return false;
    }
  }, [money, userInfo]);

  const canNext = useCreation(() => {
    if (chooseCardId && Number(money) && !error) {
      return true;
    } else {
      return false;
    }
  }, [money, error, chooseCardId]);

  return (
    <Div bg="gray100" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        <BankCom
          info={chooseInfo}
          next
          onPress={() => navigation.navigate('BankCard')}
        />

        <Div bg="white" p={14} mt={10}>
          <Text color="gray500" fontSize="sm">
            {t('ti-xian-jin-e')}
          </Text>
          <Div
            row
            alignItems="center"
            borderBottomColor={error ? 'red300' : 'gray100'}
            borderBottomWidth={1}
          >
            <Text fontSize="6xl" color={error ? 'red300' : 'gray500'}>
              ¥
            </Text>
            <Input
              flex={1}
              autoFocus={true}
              keyboardType="numeric"
              value={money}
              ml={5}
              borderWidth={0}
              fontSize="6xl"
              px={0}
              loaderColor="gray400"
              color={error ? 'red500' : 'gray900'}
              opacity={1}
              onChangeText={(val) => {
                setmoney(val);
              }}
              onBlur={() => {
                setmoney(Number(money).toFixed(2));
              }}
            />
          </Div>
          <Text fontSize="xs" color={error ? 'red500' : 'gary500'} mt={6}>
            {t('ke-yong-yu-e')}
            {getMoney(userInfo.money)}
            {t('yuan')}
          </Text>
        </Div>

        <Button
          bg="yellow500"
          block
          m={15}
          disabled={!canNext}
          onPress={() => {
            toastShow();
            saveApply(Number(money), chooseCardId)
              .then((res) => {
                toastSuccess(t('ti-jiao-cheng-gong'));
                navigation.navigate('WithdrawResult', { id: res.id });
              })
              .catch((e) => {
                toastInfo(e.error);
              });
          }}
        >
          {t('yu-ji-liang-xiao-shi-nei-dao-zhang-que-ren-ti-xian')}
        </Button>
      </ScrollView>
    </Div>
  );
}