import React, {Component} from 'react';
import { View, Text, Button, StyleSheet, TextInput, ScrollView, KeyboardAvoidingView, Dimensions } from 'react-native';
import { StackActions, NavigationActions, withNavigation } from 'react-navigation';
const {width, height} = Dimensions.get('window');
class ChangePassword extends Component {
 static navigationOptions = {
  headerStyle: {
   elevation: 0, //去除安卓手機header的樣式
  },
 };
 constructor(props) {
  super(props);
  this.state = {
   isTrue: false,
   text: '',
   text1: '',
  };
 }
 onChangeText = (text1) => {
  this.setState({
   text1
  },()=> {
   if (this.state.text1.length >= 8) {
    this.setState({
     isTrue: true
    })
   } else if (this.state.text1.length < 8) {
    this.setState({
     isTrue: false
    })
   }
  })
 }
 render() {
  return (
   <ScrollView style={styles.container}>
   <KeyboardAvoidingView behavior="position" keyboardVerticalOffset = {120} >
     <Text style={styles.title}>修改密碼</Text>
     <Text style={styles.totst}>密碼為8-16位，須包含數字、字母2中元素</Text>
      <TextInput
       style={styles.textinput}
       placeholder="請輸入初始密碼"
       placeholderTextColor = "#cccccc"
       maxLength = {16}
       value={this.state.value}
       secureTextEntry = {true}
       onChangeText={(text) => this.setState({text})}
      />
      <Text style={styles.Line}></Text>
      <TextInput
       style={styles.textinput}
       placeholder="請輸入新密碼"
       placeholderTextColor = "#cccccc"
       maxLength = {16}
       secureTextEntry = {true}
       onChangeText={this.onChangeText}
      />
     <Text style={styles.Line}></Text>
     {
      this.state.isTrue == true ? <Text style={styles.errorconfirm} onPress={() => {
       alert('你點擊了確認，該跳轉了！~')
       // this.props.navigation.navigate('ChangePassword')
      }}>確認</Text> : <Text style={styles.confirm}>確認</Text>
     }
    </KeyboardAvoidingView>
   </ScrollView>
  );
 }
}
const styles = StyleSheet.create({
 container: {
  height: height,
  padding: 16,
 },
 title: {
  color: '#4a4a4a',
  fontSize: 23,
  fontFamily: 'PingFangSC-Semibold',
 },
 totst: {
  color: '#999999',
  fontFamily: 'PingFang-SC-Medium',
  fontSize: 13,
  marginTop: 16,
 },
 Line: {
  height: 1,
  backgroundColor: '#d8d8d8',
 },
 textinput: {
  marginTop: 50,
  color: '#4a4a4a',
  fontSize: 18,
 },
 errorconfirm: {
  marginTop: 44,
  height: 44,
  lineHeight: 44,
  textAlign: 'center',
  fontSize: 16,
  color: '#ffffff',
  backgroundColor: '#25A3FF',
  borderRadius: 4,
 },
 confirm: {
  marginTop: 44,
  height: 44,
  lineHeight: 44,
  textAlign: 'center',
  fontSize: 16,
  color: '#ffffff',
  backgroundColor: '#cccccc',
  borderRadius: 4,
 }
})
export default withNavigation(ChangePassword);