'use strict';
import React from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    PixelRatio,
    TouchableOpacity,
    ListView,
    LayoutAnimation,
} from 'react-native';

import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import MyOrderListCell from './MyOrderListCell';
import OrderTypeSelector from './OrderTypeSelector';


export default class MyOrderList extends React.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, highlightRow) {
        return (
            <MyOrderListCell
                orderData={rowData}
                onPressOrder={this.props.onPressOrder}
            />
        );
    }

    render() {

        let orderList = this.props.orderList;
        let array = orderList ? orderList.toArray() : [];

        return (
            <View style={styles.container}>
                <OrderTypeSelector selectedTypeId={this.props.orderType} onSelectType={this.props.onSelectType} />
                <View style={styles.splitLine}></View>
                <ListView
                    style={styles.listContainer}
                    dataSource={this.dataSource.cloneWithRows(array)}
                    enableEmptySections={true}
                    renderRow={this.renderRow}
                    onEndReached={this.props.onEndReached}
                    onEndReachedThreshold = {500}
                />
            </View>
        );


    }
};

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },

    splitLine: {
        width: width,
        height: 15 * DEVICE_WIDTH_RATIO,
        borderBottomColor: '#e0e0e0',
        borderBottomWidth: 0.5,
        backgroundColor:'#f0f0f0',
    },

    listContainer: {
        width: width,
        height: 300 * DEVICE_WIDTH_RATIO,
        backgroundColor:'#ffffff',

    },


});