'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
import SectionItem from '../home/SectionItem';
import PropTypes from 'prop-types';

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

export default class SysMsgCell extends React.Component {

    static propTypes = {
        data: ImmutablePropTypes.contains({
            user: ImmutablePropTypes.contains({
                avatar: PropTypes.string,
                uid: PropTypes.number,
                nickName: PropTypes.string,
            }),
            title: PropTypes.string,
            subTitle: PropTypes.string,
            timeago: PropTypes.string,
            isRead: PropTypes.bool,
            post:ImmutablePropTypes.contains({
                sectionId: PropTypes.number,
                sectionName: PropTypes.string,
            }),
        }),

        onPressPost: PropTypes.func,
        onPressAvatar: PropTypes.func,
        onPressSection: PropTypes.func,
    };


    constructor(props) {
        super(props);
    }

    render() {
        let data = this.props.data.toJS();
        let {user, title, timeago, post, subTitle, contentType} = data;
        let postId = post.id;
        let subTitleStyle = contentType == 1 ? null : {marginBottom: 15};
        return (

            <TouchableOpacity
                activeOpacity={contentType == 1 ? 0.8 : 1}
                onPress={() => {
                    if (contentType == 1) {
                        this.props.onPressPost && this.props.onPressPost(postId);
                    }
                }}
            >
                <View style={styles.container}>
                    <View style={styles.topContainer}>
                        <View style={styles.topRight}>
                            <Text style={styles.name}>{title}</Text>
                            <Text style={styles.timeago}>{timeago}</Text>
                        </View>

                    </View>

                    <View style={[styles.middleContainer, subTitleStyle]}>
                        <Text style={styles.content}
                            numberOfLines={2}
                        >{subTitle}</Text>
                    </View>

                    {contentType == 1 ? <View style={styles.bottomContainer}>
                        <ImageBackground
                            defaultSource={require('../../images/message/duihuakuang.png')}
                            style={styles.bubble}
                            resizeMode={'stretch'}
                        >
                            <Text style={styles.reply}
                                numberOfLines={1}
                            >
                                {post.thumb}
                            </Text>
                        </ImageBackground>

                        <View style={styles.section}>
                        <SectionItem
                            name={post.sectionName}
                            onPressSection={() => {
                                this.props.onPressSection && this.props.onPressSection({id: post.sectionId, name: post.sectionName});
                            }}
                        />
                        </View>

                    </View> : null}

                </View>

            </TouchableOpacity>


        );

    }
}

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

let styles = StyleSheet.create({
    container: {
        flexDirection:'column',
    },

    topContainer: {
        height: 60,
        flexDirection: 'row',
        padding: 15,
    },

    topRight: {
        backgroundColor: 'white',
        marginLeft:0,
        flexDirection: 'column',
    },

    name: {
        fontFamily: 'Helvetica Light',
        fontSize: 15,
    },

    timeago: {
        fontFamily: 'Helvetica Light',
        fontSize: 10,
        color: '#b0b0b0',
    },

    middleContainer: {
        backgroundColor:'white',
    },

    content: {
        marginLeft: 15,
        marginRight: 15,
        fontFamily: 'Helvetica Light',
        fontSize: 14,
    },

    bottomContainer: {
        height: 90,
        marginLeft: 15,
        marginRight: 15,
        marginTop: 0,
    },

    bubble: {
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
        height: 40,
        padding: 10,
    },

    reply: {
        backgroundColor: 'transparent',
        fontFamily: 'Helvetica Light',
        fontSize: 12,
        color: '#8b8b8b',
        marginTop: 6,
        width: width - 30 - 20,
    },

    section: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 15,
    },


});