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';
export default function RegisterScreen({
  navigation,
}: StackScreenProps<MainStackParamList, 'Login'>) {
  navigation.setOptions({
    headerLeft: (props) => (
      <Button
        bg="none"
        px={15}
        py={0}
        onPress={() => {
          navigation.goBack();
        }}
      >
        <Image w={50} h={50} source={require('../assets/images/logo.png')} />
      </Button>
    ),
  });

  const { loginByRegister } = 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 [sure, setSure] = React.useState<boolean>(false);

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

  return (
    <Div bg="gray100" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        <Div
          bg="white"
          py={20}
          px={10}
          borderTopWidth={5}
          borderColor="gray100"
        >
          <Text textAlign="center">{t('guide1')}！</Text>
          <Text textAlign="center">{t('guide2')}</Text>
        </Div>
        <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>
          {/* <Div row alignItems="center" py={10}>
            <Text w={96} textAlign="right">
              {t('yan-zheng-ma')}：
            </Text>
            <Div
              flex={1}
              bg="gray100"
              rounded="sm"
              px={15}
              ml={5}
              h={30}
              alignItems="stretch"
            >
              <TextInputMask
                type={'custom'}
                value={code}
                keyboardType="numeric"
                placeholderTextColor="#a6a6a6"
                options={{
                  mask: '999999',
                }}
                onChangeText={(text) => {
                  setCode(text);
                }}
                style={{ flex: 1, fontSize: 14 }}
                placeholder={t('shu-ru-yan-zheng-ma')}
              />
            </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 bg="white" block mt={20} onPress={() => setSure(!sure)}>
            <Div row alignItems="center" flex={1} justifyContent="center">
              <Icon
                fontFamily="Ionicons"
                ml={30}
                color={sure ? 'yellow500' : 'gray400'}
                name={sure ? 'ios-radio-button-on' : 'ios-radio-button-off'}
              />
              <Div row flexWrap="wrap" ml={15} flex={1}>
                <Text color="gray400" fontSize="xs">
                  {t('yi-jing-yue-du-bing-tong-yi')}
                </Text>
                <Button bg="none" color="yellow300" fontSize="sm" p={0}>
                  {t('ding-dong-wai-mai-qi-shou-zhu-ce-xie-yi')}
                </Button>
                <Text color="gray400" fontSize="xs">
                  {t('he')}
                </Text>
                <Button bg="none" color="yellow300" p={0} fontSize="sm">
                  {t('ding-dong-wai-mai-qi-shou-yin-si-zheng-ce')}
                </Button>
              </Div>
            </Div>
          </Button>

          <Button
            w={112}
            bg="yellow500"
            alignSelf="center"
            fontSize="sm"
            my={20}
            disabled={!canSubmit}
            onPress={() => loginByRegister(phone, password, code)}
          >
            {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>
  );
}