'use strict';

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

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

export default class LikeCell extends React.Component {

    static propTypes = {
        data: ImmutablePropTypes.contains({
            user: ImmutablePropTypes.contains({
                avatar: React.PropTypes.string,
                uid: React.PropTypes.number,
                nickName: React.PropTypes.string,
            }),
            timeago: React.PropTypes.string,
            title: React.PropTypes.string,
            post: ImmutablePropTypes.contains({
                id: React.PropTypes.number,
                thumb: React.PropTypes.string,
                sectionId: React.PropTypes.string,
            }),
        }),
        onPressPost: React.PropTypes.func,
        onPressAvatar: React.PropTypes.func,
    };

    constructor(props) {
        super (props);

    }

    render() {
        let data = this.props.data.toJS();
        let {user, title, timeago, post} = data;

        return (
            <TouchableOpacity
                style={styles.row}
                activeOpacity={0.8}
                onPress={() => {
                    this.props.onPressPost && this.props.onPressPost(post.id);
                }}
            >
                <UserBrief
                    avatar={user.avatar}
                    name={user.nickName}
                    timeago={timeago}
                    onPressAvatar={() => {
                        this.props.onPressAvatar && this.props.onPressAvatar(user.uid);
                    }}
                />
                <Text style={styles.title} numberOfLines={1}>{title}</Text>
                <SlicedImage
                    style={styles.thumb}
                    source={{uri: post.thumb}}
                    defaultSource={require('../../images/message/text_default.png')}
                />
            </TouchableOpacity>
        );
    }
}

let styles = StyleSheet.create({
    row: {
        backgroundColor: 'white',
        paddingLeft: 17,
        paddingRight: 17,
        height: 65,
        flexDirection: 'row',
    },
    title: {
        fontSize: 13,
        color: '#8b8b8b',
        marginTop: 20,
        marginLeft: 10,
    },
    thumb: {
        width: 50,
        height: 50,
        position: 'absolute',
        marginTop: 7.5,
        right: 17,
    },
});