import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    Dimensions,
    Keyboard,
    TouchableOpacity,
    TouchableHighlight,
    Platform,
    TextInput,
    Alert,
    NativeModules,
} from 'react-native'
import SlicedImage from '../../../common/components/SlicedImage';

export default class SubjectPost extends Component {
    constructor(props) {
        super(props);
        this.renderReplyContentWithPlaceholder = this.renderReplyContentWithPlaceholder.bind(this);
    }

    renderReplyContentWithPlaceholder(placeholder) {
        return(
            <View style={styles.toolContainer}>
                <SlicedImage style={styles.imgIcon} source={this.props.iconSouce}/>
                <TouchableOpacity style={styles.imgButton} onPress={this.props.showImagePannel}>
                </TouchableOpacity>

                <TouchableOpacity style={styles.keyboardIcon} onPress={this.props.blurAll}>
                    <SlicedImage source={this.props.keboardIcon} />
                </TouchableOpacity>
                <View style={[styles.rightContainer]}>
                    <TextInput
                        ref='textInput'
                        style={styles.replyTextInput}
                        placeholderTextColor='#b0b0b0'
                        placeholder={placeholder}
                        multiline={true}
                        autoCapitalize={'none'}
                        autoCorrect={false}
                        selectionColor={'black'}
                        autoFocus={true}
                        maxLength={1000}
                        onChangeText={
                            (text)=>{
                                this.props.onReplyTextChange&&this.props.onReplyTextChange(text);
                            }
                        }
                        onKeyPress={(event)=>{
                            if (this.props.replyContent >= 1000) {
                                NativeModules.YH_CommunityHelper.showText('超出1000字符最长限制');
                            }
                        }}
                    />
                    <Text style={[styles.submitText, {color:this.props.replyTextColor}]} onPress={this.props.commitComment}>发送</Text>
                </View>
                <View style={styles.toolTopLine}/>
                <View style={styles.toolBottomLine}/>
            </View>
        );
    }

    render() {
        switch (this.props.replyState) {
            case 0: {//none...
                let iconSouce;
                if (this.props.likeState == 'Y') {
                    iconSouce=require('../../images/home/like.png');
                } else if (this.props.likeState == 'N'){
                    iconSouce=require('../../images/home/unlike.png');
                }
                return (
                    <View style={styles.toolContainer}>
                        <SlicedImage style={styles.imgIcon} source={iconSouce}/>
                        <TouchableOpacity
                            style={styles.imgButton}
                            onPress={this.props.onPressLikeOrDislike}>
                        </TouchableOpacity>
                        <View style={styles.rightContainer}>
                            <TouchableOpacity
                                style={styles.lzContainer}
                                onPress={
                                    ()=> {
                                        this.props.onPressLZContainer&&this.props.onPressLZContainer()
                                    }
                                }
                            >
                                <Text style={styles.fakePlaceHolder}>回复楼主：</Text>
                                <Text style={styles.replyCountText}>{'已有'+this.props.commentCount+'条回复'}</Text>
                            </TouchableOpacity>

                        </View>
                        <View style={styles.toolTopLine}/>
                        <View style={styles.toolBottomLine}/>
                    </View>
                );
            }
                break;
            case 1: {// 楼主
                return (
                    <View >
                    {this.renderReplyContentWithPlaceholder('回复楼主：')}
                    </View>
                )
            }
                break;
            case 2: {// others...
                return (
                    <View>
                    {this.renderReplyContentWithPlaceholder('回复'+this.props.someOneToReply+':')}
                    </View>
                )

            }
                break;
            default:
            break;
        }
    }
}

let {width, height} = Dimensions.get('window');

const styles = StyleSheet.create({
    toolContainer: {
        flexDirection: 'row',
        height: 41,
        alignItems:'center',
        backgroundColor: 'white',
        paddingLeft: 15,
        paddingRight: 15,
    },
    toolTopLine: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
    toolBottomLine: {
        position: 'absolute',
        left: 0,
        bottom: 0,
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },
    imgIcon: {
        left:0,
        width:19,
        height:19,
        right: 16,
    },
    imgButton: {
        position:'absolute',
        width:19,
        height:19,
        left: 15,
        top: 11,
    },
    keyboardIcon: {
        left: 10,
        width:20,
        height:20,
        right: 8,
    },
    rightContainer: {
        left: 18,
        flex: 1,
        flexDirection: 'row',
        height:41,
        alignItems:'center',
        paddingRight: 15,
    },
    replyTextInput: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 3,
        paddingBottom: 9,
        color: 'black',
        height: 33,
        top: 4,
        borderRadius:2,
        borderWidth: 0.5,
        borderColor: '#a0a0a0',
        fontSize: 14,
        backgroundColor:'white',
    },
    submitText: {
        borderRadius: 2,
        borderWidth: 0.5,
        borderColor: '#a0a0a0',
        fontSize: 14,
        alignItems:'center',
        textAlign:'center',
        height: 33,
        width: 50,
        left: 10,
        paddingTop: 10,
        color: "#b0b0b0"
    },
    lzContainer: {
        flex: 1,
        height: 33,
        borderRadius:2,
        borderWidth: 0.5,
        borderColor: '#a0a0a0',
        alignItems:'center',
        flexDirection: 'row',
        paddingLeft: 10,
        paddingRight: 10,
    },
    fakePlaceHolder: {
        flex: 1,
        fontSize:14,
        textAlign: 'left',
        color: '#b0b0b0',
        height: 32,
        paddingTop: 9,
    },
    replyCountText: {
        flex: 1,
        fontSize:14,
        textAlign: 'right',
        color: '#b0b0b0',
        paddingTop: 9,
        height: 32,
    },
});