'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
import UserBrief from './UserBrief';
import Thumbs from './Thumbs';
import SectionItem from './SectionItem';
import NumberButton from './NumberButton';

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

export default class ListCell extends React.Component {

    static propTypes = {
        data: ImmutablePropTypes.contains({
            author: ImmutablePropTypes.contains({
                avatar: React.PropTypes.string,
                uid: React.PropTypes.number,
                name: React.PropTypes.string,
            }),
            timeago: React.PropTypes.string.isRequired,
            isOwner: React.PropTypes.bool,
            isTop: React.PropTypes.bool,
            isLike: React.PropTypes.bool,
            title: React.PropTypes.string,
            desc: React.PropTypes.string,
            thumbs: ImmutablePropTypes.listOf(
                ImmutablePropTypes.contains({
                    src: React.PropTypes.string,
                })
            ),
            section: ImmutablePropTypes.contains({
                id: React.PropTypes.number,
                name: React.PropTypes.string,
            }),
            commentCount: React.PropTypes.number,
            likeCount: React.PropTypes.number,
        }),
        onPressPost: React.PropTypes.func,
        onPressAvatar: React.PropTypes.func,
        onPressSectionTag: React.PropTypes.func,
        onPressComment: React.PropTypes.func,
        onPressLike: React.PropTypes.func,
    };

    constructor(props) {
        super (props);

    }

    render() {
        let data = this.props.data.toJS();
        let {author, timeago, isOwner, isTop, isLike, title, desc, thumbs, section, commentCount, likeCount} = data;
        let likeImage = isLike ? require('../../images/home/like.png') : require('../../images/home/unlike.png')
        return (
            <TouchableOpacity
                style={styles.row}
                activeOpacity={0.8}
                onPress={() => {
                    this.props.onPressPost && this.props.onPressPost();
                }}
            >
                <View style={styles.top}>
                    <UserBrief
                        avatar={author.avatar}
                        name={author.name}
                        timeago={timeago}
                        isOwner={isOwner}
                        onPressAvatar={() => {
                            this.props.onPressAvatar && this.props.onPressAvatar();
                        }}
                    />
                    {isTop ? <Text style={styles.topTag}>置顶</Text> : null}
                </View>
                <Text style={styles.title} numberOfLines={2}>
                    {title}
                </Text>
                <Text style={styles.desc} numberOfLines={2}>
                    {desc}
                </Text>
                <Thumbs
                    style={styles.thumbs}
                    data={thumbs}
                />
                <View style={styles.bottom}>
                    <SectionItem
                        name={section.name}
                        onPressSection={() => {
                            this.props.onPressSectionTag && this.props.onPressSectionTag();
                        }}
                    />
                    <View style={styles.buttonContainer}>
                        <NumberButton
                            source={require('../../images/home/mes.png')}
                            number={commentCount}
                            onPressButton={() => {
                                this.props.onPressComment && this.props.onPressComment();
                            }}
                        />
                        <NumberButton
                            style={{marginLeft: 20}}
                            source={likeImage}
                            number={likeCount}
                            onPressButton={() => {
                                this.props.onPressLike && this.props.onPressLike();
                            }}
                        />
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
}

let styles = StyleSheet.create({
    row: {
        backgroundColor: 'white',
        paddingLeft: 17,
        paddingRight: 17,
    },
    top: {
        flexDirection: 'row',
        height: 60,
    },
    topTag: {
        position: 'absolute',
        top: 20,
        right: 0,
        width: 35,
        height: 20,
        fontSize: 11,
        textAlign: 'center',
        color: 'white',
        backgroundColor: 'black',
        paddingTop: 4.5,
    },
    title: {
        fontSize: 18,
        lineHeight: 28,
    },
    desc: {
        fontSize: 14,
        lineHeight: 23,
        color: '#888888',
    },
    thumbs: {
        marginTop: 15,
        marginBottom: 15,
    },
    bottom: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 15,
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
});