'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Button from 'apsl-react-native-button';

const {
  Component,
} = React;

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

export default class Login extends Component {

    constructor(props) {
        super(props);
    }

    static propTypes = {
        account: React.PropTypes.string,
        username: React.PropTypes.string,
        pwd: React.PropTypes.string,
        onLogoutPress:React.PropTypes.func,
        onModifyPress:React.PropTypes.func,
    };

	render() {

        return (
          <View style={styles.container}>
              <View style={styles.accountContainer }>
                <Text style={styles.text}>
                  账号:{this.props.account}
                </Text>
              </View>
              <View style={styles.line}/>
              <TouchableWithoutFeedback
                  onPress={this.props.onModifyPress}>
                <View style={styles.pwdContainer }>
                    <Text style={styles.text}>
                      修改密码
                    </Text>
                    <Image
                      style={styles.icon}
                      source={require('../images/grey.png')}
                    />
                </View>
              </TouchableWithoutFeedback>
              <Button style={styles.button}
                textStyle={styles.buttonText}
                onPress={this.props.onLogoutPress}
              >
                退出登录
              </Button>
          </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:{
      width: width,
      height: 40,
      marginTop:15,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white'
    },
    pwdContainer:{
      width: width,
      height: 40,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white',
    },
    text:{
      flex:1,
      color:'black',
      marginLeft: 10,
    },
    button: {
      marginLeft: 20,
      marginRight: 20,
      marginTop: 20,
      backgroundColor: '#d0021b',
      borderRadius:5,
      borderWidth:0,
    },
    buttonText: {
      color: '#ffffff',
      fontSize: 18,
    },
    line:{
      width: width,
      height: 1,

    },
    icon: {

    marginRight:10,
  },
});