'use strict';

import React from 'react';
import ReactNative from 'react-native';
import UserBrief from '../home/UserBrief';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';

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

export default class LikeList extends React.Component {
    static propTypes = {

    }

    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._renderSeparator = this._renderSeparator.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return (
            <View key={'separator' + sectionID + rowID} style={styles.separator}/>
        );
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        let data = rowData.toJS();
        return (
            <TouchableOpacity
                activeOpacity={1}
                style={styles.row}
            >
                <UserBrief
                    containerStyle={styles.userBrief}
                    avatar={data.avatar}
                    name={data.nickName}
                    onPressAvatar={() => {
                        this.props.onPressAvatar && this.props.onPressAvatar(data.uid);
                    }}
                />
            </TouchableOpacity>
        );
    }

    render() {
        let {list, endReached, isLoadingMore, isFetching} = this.props;
        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
                    renderRow={this._renderRow}
                    renderSeparator={this._renderSeparator}
                    enableEmptySections={true}
                    enablePullToRefresh={false}
                    onEndReached={() => {
                        this.props.onEndReached && this.props.onEndReached();
                    }}
                    renderFooter={()=>{
                        if (endReached) {
                            return <LoadMoreIndicator
                                    isVisible={true}
                                    text={'暂无更多'}
                                />
                        } else {
                            return <LoadMoreIndicator
                                    isVisible={isLoadingMore}
                                    animating={isFetching}
                                />
                        }
                    }}
                />
            </View>
        )
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    row: {
        justifyContent: 'center',
        backgroundColor: 'white',
        marginRight: 15,
    },
    userBrief: {
        height: 60,
        marginLeft: 15,
    },
    separator: {
        height: 0.5,
        backgroundColor: '#e0e0e0',
        marginLeft: 15,
        marginRight: 15,
    },
});