'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    InteractionManager,
    Platform,
} from 'react-native';

import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import EmptyContent from './EmptyContent';
import MessageListCellHeader from './MessageListCellHeader';
import MessageListSmallIconCell from './MessageListSmallIconCell';
import MessageListBigIconCell from './MessageListBigIconCell';
import MessageListTextCell from './MessageListTextCell';
import MessageListOrderCell from './MessageListOrderCell';

export default class MessageList extends Component {

    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
        this.loadMessageListCell = this.loadMessageListCell.bind(this);
    }
    componentDidMount() {
    }

    loadMessageListCell(rowData) {
        let cellType = rowData.get('businessType');
        switch (cellType) {
            case 100:
            case 101:
            case 102:
            case 103:
            case 202:
            case 203:
            case 204:
            case 205:
            case 206:
            case 207:
            case 306:
            {
                return(
                    <MessageListSmallIconCell
                        itemData={rowData}
                        onPressListItem={this.props.onPressListItem}
                    />
                );
            }
                break;
            case 200:
            case 201:
            case 403:
            {
                return(
                    <MessageListBigIconCell
                        itemData={rowData}
                        onPressListItem={this.props.onPressListItem}
                    />
                );
            }
                break;
            case 300:
            case 301:
            case 302:
            case 303:
            case 304:
            case 305:
            case 402:
            {
                return(
                    <MessageListOrderCell
                        itemData={rowData}
                        onPressListItem={this.props.onPressListItem}
                    />
                );
            }
                break;
            case 400:
            case 401:
            {
                return(
                    <MessageListTextCell
                        itemData={rowData}
                    />
                );
            }
                break;
            default:
                return(
                    <View />
                );
        }
    }

    renderRow(rowData, sectionID, rowID) {
        return (
            <View style= {styles.cellContainer}>
                <MessageListCellHeader
                    timestamp= {rowData.get('create_date')}
                />
            {this.loadMessageListCell(rowData)}
            </View>
        );
    }

    render() {
        let {isFetching, endReached, list, listId, shouldShowEmpty} = this.props.data;
        let isLoadingMore = list.size != 0 && isFetching;

        if (shouldShowEmpty) {
            return (
                <View style={styles.container}>
                    <EmptyContent
                        listId={listId}
                        onPressEmptyItem={this.props.onPressEmptyItem}
                    />
                </View>
            );
        }
        return (
            <View style={styles.container}>
                <ListView
                    contentContainerStyle={styles.contentContainer}
                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
                    renderRow={this.renderRow}
                    enableEmptySections={true}
                    onEndReached={() => {
                        if (list.size != 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                    renderFooter={() => {
                        if (endReached) {
                            return <LoadMoreIndicator
                                    isVisible={true}
                                    text={'暂无更多'}
                                />;
                        } else {
                            return <LoadMoreIndicator
                                    isVisible={isLoadingMore}
                                    animating={isFetching}
                                />;
                        }
                    }}
                />
                <LoadingIndicator
                    isVisible={isFetching}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
    },
    cellContainer: {
        backgroundColor: 'transparent',
        flexDirection: 'column',
        justifyContent: 'flex-start',
    }
});