import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { WingBlank, InputItem } from '@ant-design/react-native';
import { Caption, Paragraph } from 'react-native-paper';
import { Div } from 'react-native-magnus';
import useModel from 'flooks';
import { useCreation } from '@umijs/hooks';
import user from '../../flooks/User';
import Header from '../../components/Header';
import Button from '../../components/Button';

export default function RegisterScreen() {
  const [phone, setphone] = React.useState();
  const [password, setPassword] = React.useState();

  const { loginByRegister } = useModel(user, []);

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

  return (
    <Div flex={1} bg="white">
      <Header title="用户注册" />

      <View style={styles.list}>
        <WingBlank>
          <View>
            <InputItem
              clear
              type="phone"
              value={phone}
              onChange={setphone}
              placeholder="输入手机号"
              style={{ fontSize: 14 }}
            >
              <Paragraph>手机号</Paragraph>
            </InputItem>
            <InputItem
              clear
              type="password"
              value={password}
              onChange={setPassword}
              placeholder="输入密码"
              style={{ fontSize: 14 }}
            >
              <Paragraph>密码</Paragraph>
            </InputItem>

            <View style={[styles.btn]}>
              <Button
                disabled={!canSubmit}
                size="normal"
                style={styles.btn}
                onPress={() => loginByRegister(phone, password)}
                block
              >
                确定
              </Button>
            </View>
          </View>
        </WingBlank>
      </View>
    </Div>
  );
}

const styles = StyleSheet.create({
  list: {
    backgroundColor: '#fff',
    borderWidth: 0,
    flex: 1,
    paddingTop: 20,
  },
  btn: {
    marginTop: 40,
  },
});