'use strict';

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

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

export default class SPLikeCell extends React.Component {

    static propTypes = {
        users: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                nickName: React.PropTypes.string,
                headIcon: React.PropTypes.string,
                uid: React.PropTypes.number,
        })),
        like: React.PropTypes.number,
        browse: React.PropTypes.number,
        onPressLikeCell: React.PropTypes.func,
    };

    constructor(props) {
        super (props);

    }

    _renderLikeAvatar(avatars) {
        let users = this.props.users;
        if (users.length) {
            users.reverse();
            let space = 10;
            let left = (users.length - 1) * space;
            return (
                <View style={[styles.avatarPannel, {left}]}>
                    {users.map((item, i)=> {
                        let headStr = item.headIcon||'';
                        return (
                            <SlicedImage key={i} style={[styles.likeAvatar, {right: space * i}]} source={{uri: headStr}}/>
                        );
                    })}
                </View>
            );
        }
    }

    render() {
        let {users, like, browse} = this.props;
        let likeTextMarginLeft = users.length > 1 ? -10*(users.length -1) : 0;
        return (
            <TouchableOpacity onPress={() => {
                this.props.onPressLikeCell && this.props.onPressLikeCell()
            }}>
                <View style={styles.container}>
                    <View style={styles.leftLikeContainer}>
                        {this._renderLikeAvatar()}
                        <Text style={[styles.likeText, {marginLeft: likeTextMarginLeft}]}>{like + '人点赞'}</Text>
                    </View>
                    <View style={styles.rightLikeContainer}>
                        <Text style={styles.browseText}>{browse + '人看过'}</Text>
                    </View>
                    <View style={styles.topLine}/>
                    <View style={styles.bottomLine}/>
                </View>
            </TouchableOpacity>
        );
    }
}

let {width, height} = Dimensions.get('window');
let lineWidth = width - 30;

let styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        height: 50,
        borderColor: '#a0a0a0',
        borderTopWidth: 0.5,
        borderBottomWidth: 0.5,
        flexDirection: 'row',
        justifyContent: 'space-between',
        flex: 1,
    },
    topLine: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: lineWidth,
        height: 0.5,
        backgroundColor: '#a0a0a0',
    },
    bottomLine: {
        position: 'absolute',
        left: 0,
        bottom: 0,
        width: lineWidth,
        height: 0.5,
        backgroundColor: '#a0a0a0',
    },
    leftLikeContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        left: 15,
    },
    avatarPannel: {
        flexDirection: 'row-reverse',
        justifyContent: 'flex-start',
    },
    rightLikeContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        right: 15,
    },
    likeAvatar: {
        width: 30,
        height: 30,
        borderRadius: 15,
    },
    likeText: {
        fontSize: 14,
    },
    browseText: {
        fontSize: 14,
    },
});