'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
import UserBrief from '../home/UserBrief';

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

export default class ReplyCell extends React.Component {

    static propTypes = {

        data: ImmutablePropTypes.contains({
            self: ImmutablePropTypes.contains({
                avatar: React.PropTypes.string,
                uid: React.PropTypes.number,
                name: React.PropTypes.string,
                backgroundImage: React.PropTypes.string,
            }),

            createTime: React.PropTypes.string.isRequired,

            replyToUser: ImmutablePropTypes.contains({
                avatar: React.PropTypes.string,
                uid: React.PropTypes.number,
                name: React.PropTypes.string,
                backgroundImage: React.PropTypes.string,
            }),

            replyContent: ImmutablePropTypes.contains({
                thumbs: ImmutablePropTypes.listOf(
                    ImmutablePropTypes.contains({
                        src: React.PropTypes.string,
                    })
                ),
                desc: React.PropTypes.string,
            }),

            postInfo: ImmutablePropTypes.contains({
                type:React.PropTypes.string.isRequired,
                title:React.PropTypes.string,
                postId:React.PropTypes.string,
            }),

        }),

            onPressAvatar: React.PropTypes.func,
            onPressReply: React.PropTypes.func,
            onPressPosts: React.PropTypes.func,


    };

    constructor(props) {
        super(props);
        this._renderReplyContent = this._renderReplyContent.bind(this);
        this._renderPostInfo = this._renderPostInfo.bind(this);

    }

    _renderReplyContent(replyContent) {
        if (replyContent.desc === '') {
            return (
                <Image
                    source = {require('../../images/user/default-pic.png')}
                />
            );
        } else {
            return (
                <Text>
                    {replyContent.desc}
                </Text>
            );
        }
    }

    _renderPostInfo(postInfo) {
        if (postInfo) {
            if (postInfo.type === 'image') {
                return (
                    <Image
                        source = {require('../../images/user/default-pic.png')}
                    />
                );
            } else {
                return (
                    <Text>
                        {postInfo.title}
                    </Text>
                );
            }
        }

    }
    render() {
        let data = this.props.data.toJS();
        let {
            self,
            replyToUser,
            replyContent,
            createTime,
            postInfo,
        } = data;

        return (
            <View style={styles.container}>
                <View style={styles.topContainer}>
                    <UserBrief
                        avatar={self.avatar}
                        name={self.name}
                        timeago={createTime.toString()}
                        onPressAvatar={() => {
                            this.props.onPressAvatar && this.props.onPressAvatar();
                        }}
                    />

                </View>

                <View style={styles.reply}>
                    <Text style={[styles.text,{fontSize:14}]}>
                    回复

                        <Text style={{color: '#4a90e2', fontSize: 14,}}
                        onPress={() => {
                            this.props.onPressReply && this.props.onPressReply();
                        }}
                        >
                         {replyToUser.name}
                        </Text>



                    :{this._renderReplyContent(replyContent)}

                    </Text>
                </View>

                <View style={styles.lineInCell}/>

                <TouchableOpacity
                    style={styles.row}
                    activeOpacity={0.8}
                    onPress={() => {
                        this.props.onPressPost && this.props.onPressPost();
                    }}
                >
                <View style={styles.bottomContainer}

                >
                    <Text
                        style={[styles.text, styles.posts]}
                        numberOfLines={1}

                    >
                    帖子：{this._renderPostInfo(postInfo)}
                    </Text>
                </View>
                </TouchableOpacity>

            </View>


        );

    }
}

let styles = StyleSheet.create({

    container: {
        backgroundColor:'white',
        flexDirection:'column',
    },

    topContainer: {
        margin: 15,
    },

    reply: {
        // backgroundColor: 'red',
        marginLeft: 15,
        marginRight: 15,
    },

    text: {
        fontFamily: 'Helvetica Light',
        textAlign: 'left',
    },


    bottomContainer: {
        backgroundColor:'white'
    },

    posts:{
        margin:15,
        fontSize: 18,
        flexDirection: 'row',
        alignSelf: 'flex-start',
        height:25,
    },

    lineInCell: {
        height: 1,
        marginLeft: 15,
        marginTop: 15,
        // marginBottom: 15,
        backgroundColor: '#e0e0e0',
    },

});