'use strict';

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

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

export default class MsgCenterCatgoryCell extends React.Component {

    static propTypes = {
        data: ImmutablePropTypes.contains({
            timeagoStr:React.PropTypes.string,
            tips:React.PropTypes.string,
            isRead: React.PropTypes.bool,
        }),

        onPressCell: React.PropTypes.func,
    };

    constructor(props) {
        super(props);
    }

    render() {
        let data = this.props.data.toJS();
        let {timeagoStr, tips, isRead} = data;

        return (

            <TouchableOpacity

            activeOpacity={0.8}
            onPress={() => {
                this.props.onPressCell && this.props.onPressCell();
            }}
            >

            <View style={styles.container}>

            <View style={styles.left}>
            <LittleRedDotImage
            isRedDot={!isRead}
            defaultSource={this.props.defaultSource}
            />
            </View>

            <View style={styles.middle}>
            <Text style={styles.title}
            numberOfLines={1}
            >{this.props.title}</Text>

            <View style={styles.contentContainer}>
            <Text style={styles.content} numberOfLines={1}>{tips}</Text>
            <Text style={styles.timeago}>{timeagoStr}</Text>
            </View>

            </View>

            <View style={styles.right}>

            <Image style={styles.rightIcon}
            defaultSource={require('../../images/message/right.png')}
            />

            </View>

            <View style={styles.line}>

            </View>
            </View>

            </TouchableOpacity>


        );

    }
}

let {width, height} = Dimensions.get('window');
let contentMaxLenght = (200 / 375) * width;
let styles = StyleSheet.create({
    container: {
        backgroundColor:'white',
        flexDirection:'row',
        // justifyContent:'center',
        // alignItems:'center',
        height: 60,
        // backgroundColor: 'yellow',
    },

    left: {
        width: 60,
        height: 60,
        padding: 15,
        // backgroundColor:'',
    },

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

    title: {
        marginTop: 13,
        fontFamily: 'Helvetica Light',
        fontSize: 15,
        backgroundColor:'white',
    },

    content: {
        // marginTop: 15,
        // flex:1,
        fontFamily: 'Helvetica Light',
        fontSize: 10,
        minWidth: 80,
        maxWidth: contentMaxLenght,

        // backgroundColor:'red',
    },

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

    },
    right: {

        width: 27,
        // height: 60,
        // backgroundColor:'red',
    },

    rightIcon: {
        marginTop: 19,
        // backgroundColor: 'white',
        height: 22,
        width: 12,

    },

    contentContainer: {
        flexDirection:'row',
    },

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

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


    bottomContainer: {
        backgroundColor:'white'
    },

    line: {
        height: 1,
        position: 'absolute',
        width: width,
        bottom: 0,
        right: 0,
        backgroundColor: '#e0e0e0',
    },

    replyTouch: {
        backgroundColor: 'red',
        // padding: 0,
        width:80,
        height: 40,
    },
});