'use strict';

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

import MessageCell from './MessageCell';

export default class Message extends Component {

    constructor(props) {
        super(props);

        this.renderRow = this.renderRow.bind(this);
        this.trigggePullToRefresh = this.trigggePullToRefresh.bind(this);

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

    componentDidMount() {
        this.trigggePullToRefresh();
    }

    trigggePullToRefresh() {
        if (Platform.OS === 'ios') {
            InteractionManager.runAfterInteractions(() => {
                this.listView && this.listView.getScrollResponder().startPullToRefresh();
            });
        } else {
            this.props.onRefresh && this.props.onRefresh();
        }
    }

    renderRow(rowData, sectionID, rowID) {
        
        return <MessageCell 
            rowID={rowID}
            data={rowData}
            onPressListItem={this.props.onPressListItem}
        />;
    }


    render() {
        let {defaults, latest} = this.props.data;
        let dataSource = defaults.toArray();
        let isPullToRefresh = latest.isFetching;

        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    contentContainerStyle={styles.contentContainer}
                    dataSource={this.dataSource.cloneWithRows(dataSource)}
                    renderRow={this.renderRow}
                    enableEmptySections={true}
                    enablePullToRefresh={true}
                    isOnPullToRefresh={isPullToRefresh}
                    onRefreshData={() => {
                        this.props.onRefresh && this.props.onRefresh();
                    }}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    contentContainer: {

    },
});