'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';
import emojiDecter from '../../utils/emojiDecter';

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,
            id: React.PropTypes.number,
            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,
        }),
        hideSection: React.PropTypes.bool,
        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, id, title, desc, thumbs, section, commentCount, likeCount} = data;
        let likeImage = isLike ? require('../../images/home/like.png') : require('../../images/home/unlike.png');
        let titleStyle = emojiDecter(title) ? null : {paddingTop: -(28 - 18) / 2};
        let descStyle = emojiDecter(desc) ? null : {paddingTop: -(23 - 14) / 2};
        let hideSection = this.props.hideSection;
        let bottomStyle = hideSection ? {alignSelf: 'flex-end'} : null;
        let thumbMarginTop = 10;
        let bottomMarginTop = 15;
        if (title && !desc && thumbs.length == 0) {
            bottomMarginTop = 8;
        }
        if (title && desc && thumbs.length == 0) {
            bottomMarginTop = 10;
        }
        if (title && desc && thumbs.length > 0) {
            thumbMarginTop = 14;
            bottomMarginTop = 15;
        }
        if (title && !desc && thumbs.length > 0) {
            thumbMarginTop = 9;
        }
        if (!title && !desc && thumbs.length > 0) {
            thumbMarginTop = 0;
        }
        return (
            <TouchableOpacity
                style={styles.row}
                activeOpacity={0.8}
                onPress={() => {
                    this.props.onPressPost && this.props.onPressPost(id);
                }}
            >
                <View style={styles.top}>
                    <UserBrief
                        avatar={author.avatar}
                        name={author.name}
                        timeago={timeago}
                        isOwner={isOwner}
                        onPressAvatar={() => {
                            this.props.onPressAvatar && this.props.onPressAvatar(author.uid);
                        }}
                    />
                    {isTop ? <Text style={styles.topTag}>置顶</Text> : null}
                </View>
                {title ? <Text style={[styles.title, titleStyle]} numberOfLines={2}>{title}</Text> : null}
                {desc ? <Text style={[styles.desc, descStyle]} numberOfLines={2}>{desc}</Text> : null}
                {thumbs.length > 0 ? <Thumbs style={[styles.thumbs, {marginTop: thumbMarginTop}]} data={thumbs}/> : null}
                <View style={[styles.bottom, bottomStyle, {marginTop: bottomMarginTop}]}>
                    {hideSection ? null : <SectionItem
                        name={section.name}
                        onPressSection={() => {
                            this.props.onPressSectionTag && this.props.onPressSectionTag(section);
                        }}
                    />}

                    <View style={styles.buttonContainer}>
                        <NumberButton
                            source={require('../../images/home/mes.png')}
                            number={commentCount}
                            onPressButton={() => {
                                this.props.onPressComment && this.props.onPressComment(id);
                            }}
                        />
                        <NumberButton
                            style={{marginLeft: 20}}
                            source={likeImage}
                            number={likeCount}
                            onPressButton={() => {
                                this.props.onPressLike && this.props.onPressLike(data);
                            }}
                        />
                    </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: {
        marginTop: -6,
        fontSize: 18,
        lineHeight: 28,
    },
    desc: {
        marginTop: 3,
        fontSize: 14,
        lineHeight: 23,
        color: '#888888',
    },
    thumbs: {
        marginTop: 15,
    },
    bottom: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 15,
        marginBottom: 15,
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
});