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 Header from '../../components/Header';
import Button from '../../components/Button';

export default function BackPasswordScreen() {
  const [phone, setphone] = React.useState();
  const [code, setCode] = React.useState();
  const [password, setPassword] = React.useState();
  const [password2, setPassword2] = React.useState();

  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
              type="number"
              value={code}
              onChange={setCode}
              extra={<Caption style={{ color: '#FFC21C' }}>发送验证码</Caption>}
              placeholder="输入验证码"
              maxLength={6}
              style={{ fontSize: 14 }}
              onExtraClick={() => {
                console.log('发送验证码');
              }}
            >
              <Paragraph>验证码</Paragraph>
            </InputItem>
            <InputItem
              clear
              type="password"
              value={password}
              onChange={setPassword}
              placeholder="输入新密码"
              style={{ fontSize: 14 }}
            >
              <Paragraph>新密码</Paragraph>
            </InputItem>
            <InputItem
              clear
              type="password"
              value={password2}
              onChange={setPassword2}
              placeholder="再次输入密码"
              style={{ fontSize: 14 }}
            >
              <Paragraph>确认密码</Paragraph>
            </InputItem>

            <View style={[styles.btn]}>
              <Button size="normal" style={styles.btn} onPress={() => {}} block>
                确定
              </Button>
            </View>
          </View>
        </WingBlank>
      </View>
    </Div>
  );
}

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