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

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

import Login from './model';

import { MainStackParamList } from '../types';
import { connect } from '../utils/SystemUtils';
import Navigation from '../navigation/LoginStackNavigator';
import SmsInput from '../components/SmsInput';
import { verify } from '../utils/SmsUtil';

export default function ForgetPsdScreen({ navigation }: StackScreenProps) {
  const { changePsd } = useModel(Login, []);

  const { t } = useTranslation();

  const [phone, setPhone] = React.useState<string>('');
  const [code, setCode] = React.useState<string>('');
  const [password, setpassword] = React.useState<string>('');
  const [password2, setpassword2] = React.useState<string>('');

  const canSubmit = useCreation(() => {
    if (phone && code && password && password === password2) {
      return true;
    } else {
      return false;
    }
  }, [phone, code, password, password2]);

  function submit() {
    verify(phone, code).then((res) => {
      console.log(res);
    });
  }

  return (
    <Div bg="gray100" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        <Div
          bg="white"
          py={20}
          px={25}
          borderTopWidth={5}
          borderColor="gray100"
          flex={1}
        >
          <Div row alignItems="center" py={10}>
            <Text w={96} textAlign="right">
              {t('shou-ji-hao')}：
            </Text>
            <Div
              flex={1}
              bg="gray100"
              rounded="sm"
              px={15}
              ml={5}
              h={30}
              alignItems="stretch"
            >
              <TextInputMask
                type={'custom'}
                placeholderTextColor="#a6a6a6"
                px={12}
                value={phone}
                keyboardType="numeric"
                options={{
                  mask: '999 9999 9999',
                }}
                onChangeText={(text) => {
                  setPhone(text);
                }}
                style={{ flex: 1, fontSize: 14 }}
                placeholder={t('shu-ru-shou-ji-hao')}
              />

              {__DEV__ && (
                <Input
                  onChangeText={(text) => {
                    setPhone(text);
                  }}
                />
              )}
            </Div>
          </Div>
          <SmsInput phone={phone} onCodeChange={setCode} />

          <Div row alignItems="center" py={10}>
            <Text w={96} textAlign="right">
              {t('mi-ma')}：
            </Text>
            <Input
              flex={1}
              bg="gray100"
              rounded="sm"
              loaderColor="gray400"
              px={12}
              ml={5}
              h={30}
              type={'custom'}
              value={password}
              borderWidth={0}
              fontSize="md"
              secureTextEntry
              opacity={1}
              loaderColor="gray400"
              color="gray900"
              onChangeText={(text) => {
                setpassword(text);
              }}
              style={{ flex: 1 }}
              placeholder={t('shu-ru-mi-ma')}
            />
          </Div>
          <Div row alignItems="center" py={10}>
            <Text w={96} textAlign="right">
              {t('que-ren-mi-ma')}：
            </Text>
            <Input
              flex={1}
              bg="gray100"
              rounded="sm"
              px={12}
              ml={5}
              h={30}
              type={'custom'}
              value={password2}
              borderWidth={0}
              fontSize="md"
              secureTextEntry
              opacity={1}
              loaderColor="gray400"
              color="gray900"
              onChangeText={(text) => {
                setpassword2(text);
              }}
              style={{ flex: 1 }}
              placeholder={t('zai-ci-shu-ru-que-ren-mi-ma')}
            />
          </Div>

          <Button
            w={112}
            bg="yellow500"
            alignSelf="center"
            fontSize="sm"
            my={20}
            disabled={!canSubmit}
            onPress={() =>
              changePsd(phone, code, password, () => {
                navigation.goBack();
              })
            }
          >
            {t('que-ding')}
          </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>
  );
}