'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 {isFetching, orderList} = this.props;
        let array = orderList ? orderList.toArray() : [];

        return (
            <View style={styles.container}>
                <OrderTypeSelector selectedTypeId={this.props.orderType} onSelectType={this.props.onSelectType} />
                <View style={styles.splitLine}></View>

                {
                    isFetching ? null 
                    : 
                        (array.length == 0) ?
                            <View style={styles.emptyContainer}>
                                <Image style={styles.emptyIcon} source={require('../../image/review-img-3.png')} resizeMode={'contain'}/>
                                <Text>暂无订单</Text>
                                <TouchableOpacity onPress={() => {this.props.onPressGoNew && this.props.onPressGoNew()}} >
                                    <View style={styles.buttonContainer}>
                                       <Text style={styles.button}>去逛逛</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        :
                        <ListView
                            style={styles.listContainer}
                            dataSource={this.dataSource.cloneWithRows(array)}
                            enableEmptySections={true}
                            renderRow={this.renderRow}
                            onEndReached={this.props.onEndReached}
                            onEndReachedThreshold = {500}
                        />
                }

                <LoadingIndicator isVisible={isFetching}/>

            </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: {
        flex: 1,
        backgroundColor:'#ffffff',
    },

    emptyContainer: {
        flex: 1,
        backgroundColor:'#ffffff',
        alignItems: 'center',
    },

    emptyIcon: {
        width: 110 * DEVICE_WIDTH_RATIO,
        height: 110 * DEVICE_WIDTH_RATIO,
        marginTop: 100 * DEVICE_WIDTH_RATIO,
        marginBottom: 25 * DEVICE_WIDTH_RATIO,
    },

    buttonContainer: {
        marginTop: 35 * DEVICE_WIDTH_RATIO,
        width: 235 * DEVICE_WIDTH_RATIO,
        height: 44 * DEVICE_WIDTH_RATIO,
        backgroundColor: '#222222',
        borderRadius: 5 * DEVICE_WIDTH_RATIO,
    },
    button: {
        color: 'white',
        textAlign: 'center',
        fontSize: 14 * DEVICE_WIDTH_RATIO,
        backgroundColor: 'transparent',
        lineHeight: Math.ceil(29 * DEVICE_WIDTH_RATIO),
    },



});