'use strict';

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




const {
    View,
    Text,
    Image,
    TextInput,
    StyleSheet,
    Platform,
    Dimensions,
    InteractionManager,
    ListView,

} = ReactNative;

export default class SystemMessage extends React.Component {
    static propTypes = {
        list: ImmutablePropTypes.listOf(
            ImmutablePropTypes.contains({
                author: ImmutablePropTypes.contains({
                    avatar: React.PropTypes.string,
                    uid: React.PropTypes.number,
                    name: React.PropTypes.string,
    			}),
                timeago:React.PropTypes.string,
                title:React.PropTypes.string,
                reply:React.PropTypes.string,
                section: ImmutablePropTypes.contains({
    				id: React.PropTypes.number,
    				name: React.PropTypes.string,
    			}),
            }),
        ),

        onPressSection: React.PropTypes.func,
        onRefresh: React.PropTypes.func,
        onEndReached: React.PropTypes.func,
    }

    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),
        });
    }

    componentDidMount() {
        // InteractionManager.runAfterInteractions(() => {
        //     this.listView && this.listView.getScrollResponder().startPullToRefresh();
        // });

    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <SysMsgCell
                data={rowData}
            />
        );
    }

    _renderSeparator(sectionID,rowID) {
        console.log('=====>   ' + 'separator'  + rowID) ;
        return (

            <View key={'separator'  + rowID} style={styles.separator}/>
        );
    }

    render() {
        let {list, endReached, isLoadingMore, isFetching, isRefreshing} = 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}
                isOnPullToRefresh={isRefreshing}
                onEndReached={() => {
                    this.props.onEndReached && this.props.onEndReached();
                }}
                onRefreshData={() => {
                    this.props.onRefresh && this.props.onRefresh();
                }}
                renderFooter={()=>{
                    if (endReached) {
                        return <LoadMoreIndicator
                                isVisible={true}
                                text={'没有更多啦'}
                            />
                    } else {
                        return <LoadMoreIndicator
                                isVisible={isLoadingMore}
                                animating={isFetching}
                            />
                    }
                }}
            />
            </View>


        );
    }
}



let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
let styles = StyleSheet.create({
    container: {
        top: navbarHeight,
        height: height-navbarHeight,
        backgroundColor: 'white',
    },

    separator: {
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },

});