'use strict';

import React from 'react';
import ReactNative from 'react-native';

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

export default class Setting extends React.Component {
    static propTypes = {
        userInfo: React.PropTypes.shape({
            name: React.PropTypes.string,
            sign: React.PropTypes.string,
        }),
    }

    constructor(props) {
        super(props);
        this.nameLength=0;
        this.signLength=0;

    }

    _renderSeparator() {
        return (
            <View style={styles.separator}/>
        );
    }

    render() {
        return (
            <View style={styles.container}>

                <Text style={styles.tag}>昵称</Text>

                <View style={styles.nameContainer}>
                    <TextInput
                        style={styles.name}
                        autoCapitalize="none"
                        placeholder={'昵称'}
                        value={this.props.data.nickName}
                        onChangeText={
                            (text)=>{
                                this.nameLength = text.length;
                                this.props.nickNameEdited(text);
                            }
                        }
                    />


                    <Image
                        source={require('../../images/delete.png')}
                        style={{
                            marginRight: 15,
                        }}/>
                </View>
                {this._renderSeparator()}

                <Text style={styles.tag}>签名</Text>

                <TextInput
                    style={styles.sign}
                    autoCapitalize="none"
                    placeholder={'请输入个性签名'}
                    multiline={true}
                    vaule={this.props.data.signature}
                    onChangeText={
                        (text)=>{
                            this.signLength = text.length;
                            this.props.signEdited(text);
                        }
                    }
                />

                {this._renderSeparator()}

                <Text style={[styles.tips,{marginTop:25,}]}>TIPS:</Text>
                <Text style={styles.tips}>1.社区专属昵称，仅在社区显示</Text>
                <Text style={styles.tips}>2.个性签名最多50字，请控制字数</Text>
            </View>


        );
    }
}



let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
let styles = StyleSheet.create({
    container: {
        top: navbarHeight,
        height: height-navbarHeight,
        backgroundColor: 'white',
    },

    nameContainer: {

        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
    },

    name: {
        fontFamily:'Helvetica Light',
        fontSize: 15,
        marginLeft: 15,
        width: width-55,
        height:44,
    },

    sign: {
        fontFamily:'Helvetica Light',
        fontSize: 15,
        margin: 15,
        height:150,
    },

    separator: {
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },

    tag: {
        fontFamily:'Helvetica Light',
        fontSize:15,
        margin:15,
        marginBottom:0,
    },

    tips: {
        fontFamily:'Helvetica Light',
        fontSize:13,
        margin:6,
        marginLeft: 15,
        color:'#b0b0b0',
    }
});