'use strict';

import React, {Component} from 'react';
import LoadMoreIndicator from '../indicator/LoadMoreIndicator';
import LoadingIndicator from '../indicator/LoadingIndicator';
import moment from 'moment';
import SearchBar from '../search/SearchBar';
import TransferShipmentCell from './TransferShipmentCell';

import {
    StyleSheet,
    View,
    Text,
    ListView,
    Image,
    Dimensions,
    TouchableHighlight,
} from 'react-native';

export default class TransferShipment extends Component {

    constructor(props) {
        super (props);

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

    _renderRow(rowData, sectionID, rowID) {
        return(
            <TransferShipmentCell resource={rowData} setPurchaseNum={this.props.setPurchaseNum} checkUp={this.props.checkUp} goToStatsPage={this.props.goToStatsPage}/>
        )
    }

	render() {
        let {resource} = this.props;
        let dataList = resource?resource.get('records'):null;
        let isLoadingMore = resource.get('isFetching') && resource.get('currentPage') > 0;
        let endReached = resource.get('endReached');

		return (
            <View style={styles.container}>
                <ListView
                    style={styles.listContainer}
                    dataSource={this.dataSource.cloneWithRows(dataList?dataList.toArray():[])}
                    renderRow={this._renderRow}
                    enableEmptySections={true}
                    renderFooter={()=>{
                         if (endReached) {
                            return <View style={styles.placeholder} />;
                        } else {
                            return <LoadMoreIndicator isVisible={isLoadingMore} animating={true}/>;
                        }
                    }}
                    onEndReached={() => {
                        if (dataList && dataList.size > 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                />
            </View>
		);
	}
}

let {width, height} = Dimensions.get('window');
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    listContainer: {
        flex: 1,
        backgroundColor: 'white',
    },
    placeholder: {
        width,
        height: 15,
    },
});