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

import { useTranslation } from 'react-i18next';
import { useCreation, useRequest } from 'ahooks';
import useModel from 'flooks';

import User from '../stores/User';
import request from '../utils/RequestUtils';
import { toastShow, toastSuccess, toastInfo } from '../utils/SystemUtils';

function saveBank(userId, realName, phone, idNo, bankName, cardNo) {
  return request.post('/bankCard/save', {
    data: {
      userId,
      realName,
      phone,
      idNo,
      bankName,
      cardNo,
    },
  });
}

export default function AddBankCardScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { userInfo } = useModel(User, ['userInfo']);
  const [bankName, setbankName] = React.useState<string>('');
  const [cardNo, setcardNo] = React.useState<string>('');
  const [idNo, setidNo] = React.useState<string>('');
  const [phone, setphone] = React.useState<string>('');
  const [realName, setrealName] = React.useState<string>('');
  const [code, setCode] = React.useState<string>('');
  const [sure, setsure] = React.useState<boolean>(false);

  const canSub = useCreation(() => {
    if (bankName && cardNo && idNo && phone && realName && code && sure) {
      return true;
    } else {
      return false;
    }
  }, [bankName, cardNo, idNo, phone, realName, code, sure]);

  return (
    <Div bg="gray100">
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        <Div bg="white" px={12} mt={7}>
          <Div
            row
            alignItems="center"
            borderBottomColor="gray100"
            borderBottomWidth={1}
          >
            <Text fontSize="sm" w={75}>
              {t('yin-hang-ming-cheng')}
            </Text>
            <Input
              flex={1}
              value={bankName}
              borderWidth={0}
              fontSize="sm"
              px={0}
              loaderColor="gray400"
              color="gray900"
              opacity={1}
              h={31}
              placeholder={t('shu-ru-yin-hang-ming-cheng')}
              onChangeText={(val) => setbankName(val)}
            />
          </Div>
          <Div
            row
            alignItems="center"
            borderBottomColor="gray100"
            borderBottomWidth={1}
          >
            <Text fontSize="sm" w={75}>
              {t('ka-hao')}
            </Text>
            <TextInputMask
              type={'custom'}
              value={cardNo}
              keyboardType="numeric"
              options={{
                mask: '9999 9999 9999 9999 999',
              }}
              onChangeText={(text) => {
                setcardNo(text);
              }}
              placeholderTextColor="#a6a6a6"
              style={{ flex: 1, fontSize: 12, height: 31 }}
              placeholder={t('shu-ru-yin-hang-ka-hao')}
            />
          </Div>
          <Div
            row
            alignItems="center"
            borderBottomColor="gray100"
            borderBottomWidth={1}
          >
            <Text fontSize="sm" w={75}>
              {t('xing-ming')}
            </Text>
            <Input
              flex={1}
              value={realName}
              borderWidth={0}
              fontSize="sm"
              px={0}
              h={31}
              loaderColor="gray400"
              color="gray900"
              opacity={1}
              placeholder={t('shu-ru-zhen-shi-xing-ming')}
              onChangeText={(val) => setrealName(val)}
            />
          </Div>
          <Div
            row
            alignItems="center"
            borderBottomColor="gray100"
            borderBottomWidth={1}
          >
            <Text fontSize="sm" w={75}>
              {t('shen-fen-zheng-hao')}
            </Text>
            <TextInputMask
              type={'custom'}
              value={idNo}
              keyboardType="email-address"
              options={{
                mask: '99999999999999999S',
              }}
              onChangeText={(text) => {
                setidNo(text);
              }}
              placeholderTextColor="#a6a6a6"
              style={{ flex: 1, fontSize: 12, height: 31 }}
              placeholder={t('shu-ru-shen-fen-zheng-hao')}
            />
          </Div>
          <Div
            row
            alignItems="center"
            borderBottomColor="gray100"
            borderBottomWidth={1}
          >
            <Text fontSize="sm" w={75}>
              {t('shou-ji-hao')}
            </Text>
            <TextInputMask
              type={'custom'}
              value={phone}
              keyboardType="numeric"
              options={{
                mask: '999 9999 9999',
              }}
              onChangeText={(text) => {
                setphone(text);
              }}
              placeholderTextColor="#a6a6a6"
              style={{ flex: 1, fontSize: 12, height: 31 }}
              placeholder={t('shu-ru-shou-ji-hao')}
            />
          </Div>
          <Div row alignItems="center">
            <Text fontSize="sm" w={75}>
              {t('yan-zheng-ma')}
            </Text>
            <TextInputMask
              type={'custom'}
              value={code}
              keyboardType="numeric"
              options={{
                mask: '999999',
              }}
              onChangeText={(text) => {
                setCode(text);
              }}
              placeholderTextColor="#a6a6a6"
              style={{ flex: 1, fontSize: 12, height: 31 }}
              placeholder={t('shu-ru-yan-zheng-ma')}
            />
          </Div>
        </Div>

        <Button
          bg="transparent"
          p={0}
          block
          mt={10}
          onPress={() => setsure(!sure)}
        >
          <Div row alignItems="center" flex={1} justifyContent="center">
            <Icon
              fontFamily="Ionicons"
              ml={20}
              color={sure ? 'yellow500' : 'gray400'}
              name={sure ? 'ios-radio-button-on' : 'ios-radio-button-off'}
            />
            <Div row flexWrap="wrap" ml={15} flex={1}>
              <Text color="gray500" fontSize="xs">
                {t('yi-jing-yue-du-bing-tong-yi')}
              </Text>
              <Button bg="none" color="yellow500" fontSize="sm" p={0}>
                {t('ding-dong-wai-mai-kuai-jie-zhi-fu-fu-wu-xie-yi')}
              </Button>
            </Div>
          </Div>
        </Button>

        <Button
          block
          bg="yellow500"
          m={15}
          fontSize="sm"
          disabled={!canSub}
          onPress={() => {
            toastShow();
            saveBank(userInfo.id, realName, phone, idNo, bankName, cardNo)
              .then((res) => {
                toastSuccess(t('ti-jiao-cheng-gong'));
                navigation.goBack();
              })
              .catch((e) => {
                toastInfo(e.error);
              });
          }}
        >
          下一步
        </Button>
      </ScrollView>
    </Div>
  );
}