'use strict';

import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';

import MsgCenterCatgoryCell from './MsgCenterCatgoryCell'
import MsgCenterNormalCell from './MsgCenterNormalCell'
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';

const {
    View,
    Text,
    Image,
    ListView,
    TextInput,
    StyleSheet,
    Platform,
    Dimensions,
    InteractionManager,
} = ReactNative;

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

        sysMsg: ImmutablePropTypes.contains({
                timeagoStr:React.PropTypes.string,
                tips:React.PropTypes.string,
                isRead: React.PropTypes.bool,
        }),

        likeMsg: ImmutablePropTypes.contains({
                timeagoStr:React.PropTypes.string,
                tips:React.PropTypes.string,
                isRead: React.PropTypes.bool,
        }),

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

        onPressSystemMsg: React.PropTypes.func,
        onPressAvatar: React.PropTypes.func,
        onPressSection: React.PropTypes.func,
        onRefresh: React.PropTypes.func,
        onPressSystemCell: React.PropTypes.func,
        onPressLikeCell: React.PropTypes.func,
        onPressPost: 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),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

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

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

    _renderRow(rowData, sectionID, rowID, highlightRow) {

        switch (sectionID) {
            case 'sysMsg':
                return (
                    <MsgCenterCatgoryCell
                        title={'系统消息'}
                        data={rowData}
                        onPressCell={this.props.onPressSystemCell}
                        defaultSource={require('../../images/message/sysmessage.png')}
                    />
                );
                break;

            case 'likeMsg':
            return (
                <MsgCenterCatgoryCell
                    title={'收到的赞'}
                    data={rowData}
                    onPressCell={this.props.onPressLikeCell}
                    defaultSource={require('../../images/message/like.png')}
                />
            );
            break;

            case 'list':
            if (rowData.size === 0) {
                return null;
            }
            return (
                <MsgCenterNormalCell
                    key={sectionID + rowID}
                    onPressAvatar={this.props.onPressAvatar}
                    onPressSection={this.props.onPressSection}
                    onPressPost={this.props.onPressPost}
                    data={rowData}
                />
            );

            break;
            default:
            return null;
        }
    }

    render() {

        let {sysMsg, likeMsg, list, endReached, isRefreshing, isLoadingMore, isFetching, isListFetching} = this.props;
        let dataSource = {
            sysMsg: sysMsg.toArray(),
            likeMsg: likeMsg.toArray(),
            list: list.toArray(),
        };

        let endReachedText = '暂无更多';
        if (list.size == 0) {
            endReachedText = '您还没有回复';
        }

        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    style={{flex:1}}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this._renderRow}
                    renderSeparator={this._renderSeparator}
                    enableEmptySections={true}
                    enablePullToRefresh={true}
                    isOnPullToRefresh={isRefreshing}
                    onRefreshData={() => {
                        this.props.onRefresh && this.props.onRefresh();
                    }}
                    onEndReached={() => {
                        this.props.onEndReached && this.props.onEndReached();
                    }}
                    renderFooter={() => {
                        if (endReached) {
                            return <LoadMoreIndicator
                                isVisible={true}
                                text={endReachedText}
                            />
                        } else {
                            return <LoadMoreIndicator
                                isVisible={isLoadingMore}
                                animating={isListFetching}
                            />
                        }
                    }}
                />

            </View>
        );
    }
}


let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    separator: {
        height: 0.5,
        backgroundColor: '#e0e0e0',
    },

});