'use strict';

import React from 'react';
import ReactNative from 'react-native';
import LoadingIndicator from '../../../common/components/LoadingIndicator';

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

export default class Setting extends React.Component {

    static propTypes = {

    }

    constructor(props) {
        super(props);

        this.nameLength = 0;
        this.signLength = 0;

        this.showTip = false;
    }

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

    _showAlert(currentLength, maxLength) {
        if (currentLength >= maxLength && !this.showTip) {
            this.showTip = true;
            Alert.alert('抱歉', `超出${maxLength}字符最长限制`, [
                {text: '好', onPress: () => this.showTip = false}
            ]);
        }
    }

    render() {
        let {nickName, signature, isFetching} = this.props.setting;

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

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

                <View style={styles.nameContainer}>
                    <TextInput
                        style={styles.name}
                        placeholder={'昵称'}
                        value={nickName}
                        autoFocus={true}
                        autoCapitalize={'none'}
                        autoCorrect={false}
                        maxLength={20}
                        onChangeText={(text) => {
                            this.nameLength = text.length;
                            if (this.nameLength > 20) {
                                text = text.substring(0, 21);
                                this._showAlert(this.nameLength, 20);
                            }
                            this.props.nickNameEdited(text);
                        }}
                        onKeyPress={(event) => {
                            this._showAlert(this.nameLength, 20);
                        }}
                        selectionColor={'black'}
                    />

                    <TouchableOpacity
                        onPress={() => {
                            this.props.nickNameEdited('');
                        }}
                        style={{
                            width: 41,
                            height: 44,
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                    >
                    {nickName.length ? <Image
                        source={require('../../images/user/delete.png')}
                    /> : null}

                    </TouchableOpacity>

                </View>

                {this._renderSeparator()}

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

                <TextInput
                    ref={(c) => this.signText = c}
                    style={styles.sign}
                    placeholder={'请输入个性签名'}
                    multiline={true}
                    value={signature}
                    autoCapitalize={'none'}
                    autoCorrect={false}
                    maxLength={40}
                    onChangeText={(text) => {
                        this.signLength = text.length;
                        if (this.signLength > 40) {
                            text = text.substring(0, 41);
                            this._showAlert(this.signLength, 40);
                        }
                        this.props.signEdited(text);
                    }}
                    onKeyPress={(event) => {
                        this._showAlert(this.signLength, 40);
                    }}
                    selectionColor={'black'}
                />

                {this._renderSeparator()}

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

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



let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;

let styles = StyleSheet.create({
    container: {
        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,
        height: 150,
        padding: 15,
    },

    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',
    }
});