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

import { useTranslation } from 'react-i18next';
import { useMap, useCreation, useRequest } from 'ahooks';
import { connect } from '../utils/SystemUtils';
import useModel from 'flooks';
import Login from './model';

export default function CertificationScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { data } = useRequest('/verified/my');

  const [realName, setRealName] = React.useState<string>('');
  const [idNo, setIdNo] = React.useState<string>('');
  const [idNoImgMap, idNoImgMapEvent] = useMap<string, string>([
    ['证件正面', ''],
    ['证件反面', ''],
  ]);
  const [handheldIdNo, setHandheldIdNo] = React.useState<string>('');

  const { verifiedSave } = useModel(Login, []);

  const canSubmit = useCreation(() => {
    if (
      realName &&
      idNo &&
      handheldIdNo &&
      idNoImgMapEvent.get('证件正面') !== '' &&
      idNoImgMapEvent.get('证件反面') !== ''
    ) {
      return true;
    } else {
      return false;
    }
  }, [realName, idNo, idNoImgMap, handheldIdNo]);

  React.useEffect(() => {
    if (data && data.id) {
      setRealName(data.realName);
      setIdNo(data.idNo);
      setHandheldIdNo(data.handheldIdNo);
      idNoImgMapEvent.setAll([
        ['证件正面', data.idNoImg.split(',')[0]],
        ['证件反面', data.idNoImg.split(',')[1]],
      ]);
    }
  }, [data]);

  return (
    <Div bg="#fff" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#fff',
        }}
      >
        <Div borderTopWidth={10} borderColor="gray100" px={15}>
          <Div row alignItems="center" py={10}>
            <Text w={120} textAlign="right">
              {t('zhen-shi-xing-ming')}：
            </Text>
            <Div
              flex={1}
              bg="gray100"
              rounded="sm"
              ml={5}
              h={30}
              alignItems="stretch"
            >
              <Input
                flex={1}
                bg="gray100"
                rounded="sm"
                px={12}
                ml={5}
                h={30}
                value={realName}
                borderWidth={0}
                fontSize="sm"
                opacity={1}
                loaderColor="gray400"
                color="gray900"
                opacity={1}
                placeholder={t('shu-ru-xing-ming')}
                onChangeText={(text) => {
                  setRealName(text);
                }}
                style={{ flex: 1 }}
              />
            </Div>
          </Div>

          <Div row alignItems="center" py={10}>
            <Text w={120} textAlign="right">
              {t('shen-fen-zheng-hao')}：
            </Text>
            <Div
              flex={1}
              bg="gray100"
              rounded="sm"
              px={19}
              ml={5}
              h={30}
              alignItems="stretch"
            >
              <TextInputMask
                type={'custom'}
                value={idNo}
                keyboardType="numeric"
                options={{
                  mask: '999999999999999999',
                }}
                onChangeText={(text) => {
                  setIdNo(text);
                }}
                placeholderTextColor="#a6a6a6"
                style={{ flex: 1, fontSize: 12, height: 31 }}
                placeholder={t('shu-ru-zheng-jian-hao-ma')}
              />
            </Div>
          </Div>

          <Div row py={10}>
            <Text w={120} textAlign="right">
              {t('shen-fen-zheng-zheng-fan-mian')}：
            </Text>

            <Div flex={1} row pt={30}>
              {[...idNoImgMap.keys()].map((item, index) => {
                return (
                  <Div w="50%" key={index} alignItems="center">
                    <ImagePicker
                      img={idNoImgMapEvent.get(item)}
                      setImg={(img) => idNoImgMapEvent.set(item, img)}
                    />
                    <Text textAlign="center" color="gray200" fontSize="sm">
                      {item}
                    </Text>
                  </Div>
                );
              })}
            </Div>
          </Div>

          <Div row py={10}>
            <Text w={120} textAlign="right">
              {t('shou-chi-shen-fen-zheng')}：
            </Text>

            <Div flex={1} row pt={30}>
              <Div w="50%" alignItems="center">
                <ImagePicker
                  img={handheldIdNo}
                  setImg={(img) => setHandheldIdNo(img)}
                />
              </Div>
            </Div>
          </Div>

          <Button
            w={112}
            bg="yellow500"
            alignSelf="center"
            fontSize="sm"
            my={20}
            disabled={!canSubmit}
            onPress={() =>
              verifiedSave(
                realName,
                idNo,
                idNoImgMapEvent.get('证件正面') +
                  ',' +
                  idNoImgMapEvent.get('证件反面'),
                handheldIdNo,
                data ? data.id || '' : ''
              )
            }
          >
            {t('xia-yi-bu')}
          </Button>

          <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>
        </Div>
      </ScrollView>
    </Div>
  );
}