'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
import LittleRedDotImage from './LittleRedDotImage';
import SectionItem from '../home/SectionItem';
const {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
} = ReactNative;

export default class MsgCenterNormalCell extends React.Component {

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

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

    constructor(props) {
        super(props);
    }

    render() {
        let data = this.props.data.toJS();
        let {user, title, timeago, post, subTitle, isRead} = data;
        let postId = post.id;
        return (

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

                    <View style={styles.topContainer}>
                        <LittleRedDotImage
                            extra = {user.id}
                            iconTap={this.props.onPressAvatar}
                            isRedDot={!isRead}
                            image={user.avatar}
                        />
                        <View style={styles.topRight}>
                            <Text style={styles.name} numberOfLines={1}>{user.nickName}</Text>
                            <Text style={styles.timeago}>{timeago}</Text>
                        </View>

                    </View>

                    <View style={styles.middleContainer}>
                        <Text style={styles.content}>{title}</Text>
                    </View>

                    <View style={styles.buttomContainer}>
                        <Image
                            defaultSource={require('../../images/message/duihuakuang.png')}
                            style={styles.bubble}
                            resizeMode='stretch'
                        >
                            <Text style={styles.reply}
                                numberOfLines={1}
                            >
                                {subTitle}
                            </Text>
                        </Image>

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

                    </View>
                </View>

            </TouchableOpacity>
        );

    }
}

let {width, height} = Dimensions.get('window');
let nameWidth = Math.ceil((300 / 750) * width);

let styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'white',
        flexDirection:'column',
        // justifyContent:'center',
        // alignItems:'center',
        // height: 60,
        // backgroundColor: 'yellow',
    },

    topContainer: {
        // width: 60,
        height: 60,
        flexDirection: 'row',
        padding: 15,
        // justifyContent: 'center',
        // backgroundColor:'yellow',
    },

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

    name: {
        // marginTop: 13,
        fontFamily: 'Helvetica Light',
        fontSize: 15,
        maxWidth: nameWidth,
    },

    timeago: {
        fontFamily: 'Helvetica Light',
        fontSize: 10,
        // marginLeft:15,
        color: '#b0b0b0',
        // backgroundColor:'red',
    },

    middleContainer: {
        flex: 1,
        backgroundColor:'white',
    },

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

    buttomContainer: {

        // backgroundColor:'red',
        height: 90,
        margin: 15,
        marginTop:5,
        marginBottom:0,
        // padding: 15,
    },

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


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

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

    bottomContainer: {
        backgroundColor:'white'
    },

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

});