'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Button from 'apsl-react-native-button';
import LoadingIndicator from './indicator/LoadingIndicator';

const {
  Component,
} = React;

const {
  StyleSheet,
  View,
  Image,
  Text,
  Dimensions,
  TextInput,
  Platform,
  TouchableWithoutFeedback,
} = ReactNative;

export default class ModifyPassword extends Component {

    constructor(props) {
        super(props);
    }

    static propTypes = {
        oldPwd: React.PropTypes.string,
        newPwd: React.PropTypes.string,
        repeatPwd: React.PropTypes.string,
        onModifyOldPwd:React.PropTypes.func,
        onModifyNewPwd:React.PropTypes.func,
        onModifyRepeatPwd:React.PropTypes.func,
        onModifySubmitPress:React.PropTypes.func,
    };

	render() {

        return (
          <View style={styles.container}>
              <View style={styles.accountContainer }>
                <Text style={styles.text}>
                   原密码
                </Text>
                <TextInput
                  style={styles.pwd}
                  secureTextEntry={true}
                  underlineColorAndroid='transparent'
                  onChangeText={this.props.onModifyOldPwd}
                  value={this.props.oldPwd}
                />
              </View>
              <View style={styles.line}/>
                <View style={styles.accountContainer }>
                    <Text style={styles.text}>
                    现密码
                </Text>
                <TextInput
                  style={styles.pwd}
                  secureTextEntry={true}
                  underlineColorAndroid='transparent'
                  onChangeText={this.props.onModifyNewPwd}
                  value={this.props.newPwd}
                />
              </View>
              <View style={styles.line}/>
                <View style={styles.accountContainer }>
                  <Text style={styles.text}>
                    再输一次
                  </Text>
                  <TextInput
                  style={styles.pwd}
                  secureTextEntry={true}
                  underlineColorAndroid='transparent'
                  onChangeText={this.props.onModifyRepeatPwd}
                  value={this.props.repeatPwd}
                />
              </View>
              <Button style={styles.button}
                textStyle={styles.buttonText}
                onPress={this.props.onModifySubmitPress}
              >
                确定
              </Button>

              <LoadingIndicator
                  isVisible={this.props.isFetching}
              />
          </View>
        );
    }
}

let {height, width} = Dimensions.get('window');
let textPaddingTop = height * 7 / 10;
let buttonMargin = (width - 320) / 2;
var styles = StyleSheet.create({
    container:{
      flex: 1,
      flexDirection: 'column',
      alignItems: 'center',
      width: width,
      height: height,
      top:(Platform.OS === 'android') ? 50 : 64,
      backgroundColor: '#f0f0f0'
    },
    accountContainer:{
      flexDirection: 'row',
      width: width,
      height: 40,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white'
    },
    text:{
      flex:1,
      marginLeft: 10,
      color:'black',
    },
    pwd: {
      flex: 4,
      borderColor: 'gray',
      textAlignVertical:'center',
    },
    button: {
      marginLeft: 20,
      marginRight: 20,
      marginTop: 20,
      backgroundColor: '#d0021b',
      borderRadius:5,
      borderWidth:0,
    },
    buttonText: {
      color: '#ffffff',
      fontSize: 18,
    },
    line:{
      width: width,
      height: 1,

    }
});