'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,
    TouchableOpacity,
} = ReactNative;

export default class Login extends Component {

    constructor(props) {
        super(props);
    }

    static propTypes = {
        account: React.PropTypes.string,
        pwd: React.PropTypes.string,
        isFetching:React.PropTypes.bool,
        isDisplayPwd:React.PropTypes.bool,
        onLoginPress: React.PropTypes.func,
        onDeleteUserPress: React.PropTypes.func,
        onShowPwdPress: React.PropTypes.func,
        onAccountChange:React.PropTypes.func,
        onPwdChange:React.PropTypes.func,
    };


    renderUserText() {
        return (
            <View style={styles.textContainer}>
                <TextInput
                    style={styles.username}
                    placeholder={'账号'}
                    underlineColorAndroid='transparent'
                    onChangeText={this.props.onAccountChange}
                    value={this.props.account}
                    selectionColor={'white'}
                    autoCapitalize={'none'}
                    autoCorrect={false}
                    maxLength={30}
                />
                <TouchableOpacity
                    onPress={this.props.onDeleteUserPress}>
                    <Image
                        style={styles.buttonDelete}
                        resizeMode={Image.resizeMode.contain}
                        source={require('../images/delete.png')}
                    />
                </TouchableOpacity>
            </View>
        );
  }
    renderPwdText() {
        return (
            <View style={styles.textContainer}>
                <TextInput
                    style={styles.pwd}
                    secureTextEntry={this.props.isDisplayPwd?false:true}
                    placeholder={'密码'}
                    underlineColorAndroid='transparent'
                    onChangeText={this.props.onPwdChange}
                    selectionColor={'white'}
                    autoCapitalize={'none'}
                    autoCorrect={false}
                    maxLength={30}
                />
                <TouchableOpacity
                    onPress={this.props.onShowPwdPress}>
                    <Image
                        style={styles.buttonDisplayPwd}
                        resizeMode={Image.resizeMode.contain}
                        source={this.props.isDisplayPwd?require('../images/eyes.png'):require('../images/eyeopen.png')}
                    />
                </TouchableOpacity>
            </View>
        );
    }
	render() {

        return (

            <Image style={styles.container} source={require('../images/login.png')} resizeMode={'cover'} >
                <Image
                    style={styles.logo}
                    source={require('../images/logo.png')}
                />
                {this.renderUserText()}
                {this.renderPwdText()}
                <Button
                    style={styles.button}
                    textStyle={styles.buttonText}
                    onPress={this.props.onLoginPress}
                >
                    登录
                </Button>

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

let {height, width} = Dimensions.get('window');
let textPaddingTop = height * 7 / 10;
let buttonMargin = (width - 320) / 2;
let inputWidth = width-40;
var styles = StyleSheet.create({
  container:{
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    width: width,
    height: height,
  },
  textContainer:{
    flexDirection: 'row',
    alignItems: 'center',
    width:inputWidth,
    height:40,
    justifyContent: 'center',
    borderRadius:5,
    backgroundColor: 'gray',
    marginBottom: 10,
  },
  logo: {
    width:256,
    height:40,
    marginBottom: 40,
  },
  username: {
    flex: 1,
    height:40,
    paddingLeft:10,
    color:'white',
    textAlignVertical: "center"
  },
  pwd: {
    flex: 1,
    paddingLeft:10,
    color:'white',
    textAlignVertical: "center"
  },
  button: {
      marginLeft: 20,
      marginRight: 20,
      backgroundColor: '#b3b3b3',
      borderWidth:0,
      borderRadius:5,
  },
  buttonText: {
      color: '#ffffff',
      fontSize: 18,
  },
  buttonDelete: {
    width:20,
    height:20,
    marginRight:10,
  },
  buttonDisplayPwd: {
    width:25,
    height:18,
    marginRight:10,
  },
});