'use strict';

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

import {List} from 'immutable';

import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import LoadingIndicator from '../../../common/components/LoadingIndicator';

import EmptyView from './EmptyView';
import ListHeader from './ListHeader';
import ListFooter from './ListFooter';
import ProductListCell from '../detail/ProductListCell';

export default class OrderList extends Component {
    constructor(props) {
        super(props);
        this.triggePullToRefresh=this.triggePullToRefresh.bind(this);
        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    componentDidMount() {
        this.triggePullToRefresh();
    }

    componentWillUnmount() {

    }

    triggePullToRefresh() {
        if (Platform.OS === 'ios') {
            this.listView && this.listView.getScrollResponder().startPullToRefresh();
        } else {
            this.props.onRefresh && this.props.onRefresh(this.props.type);
        }
    }

    renderRow(rowData, sectionID, rowID) {
        let isVirtualOrder = rowData.get('attribute','1') == '3';//虚拟商品订单
        let isPresaleOrder = rowData.get('attribute','1') == '9';//预售商品订单
        let productListBlob = {
            isVirtualOrder,
            isPresaleOrder,
            list: rowData && rowData.get('order_goods'),
        };
        return (
            <View style= {styles.cellContainer}>
                <ListHeader data={rowData}/>
                <ProductListCell
                    onPressProduct={() =>{
                        this.props.onGoDetail && this.props.onGoDetail(rowData);
                    }}
                    data={productListBlob}
                    bottomStyle={{borderBottomWidth:0,borderColor:'#e5e5e5'}}
                    onPressDelayNotice={this.props.onPressDelayNotice}
                />
                <ListFooter
                    data={rowData}
                    orderAction={(link) =>{
                        this.props.orderAction && this.props.orderAction(this.props.type,rowData, link);
                    }}
                />
            </View>
        );
    }

    render() {
        let {dataSource} = this.props;
        let isFetching = dataSource.get('isFetching',false);
        let endReached = dataSource.get('endReached',true);
        let list = dataSource.get('list',List());
        let total = dataSource.get('total',0);
        let isFirstLoad = dataSource.get('firstLoad',true);
        let currentPage = dataSource.get('currentPage');

        let isPullToRefresh = isFetching && dataSource.get('currentPage') < 1;
        let isLoadingMore = list.size != total && !endReached;
        let isShowLoading = list.size == 0 && isFetching;
        let shouldShowEmpty = list.size == 0 && !isFetching;

        if (shouldShowEmpty && !isFirstLoad) {
            return(
                <View style={styles.container}>
                    <EmptyView
                        onPressEmptyItem={this.props.onPressEmptyItem}
                    />
                </View>
            );
        }
        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    contentContainerStyle={styles.contentContainer}
                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
                    renderRow={this.renderRow}
                    enableEmptySections={true}
                    enablePullToRefresh={true}
                    isOnPullToRefresh={isPullToRefresh}
                    onRefreshData={() => {
                        this.props.onRefresh && this.props.onRefresh(this.props.type);
                    }}
                    onEndReached={() => {
                        if (list.size != 0) {
                            this.props.onLoadMore && this.props.onLoadMore(this.props.type);
                        }
                    }}

                    renderFooter={() => {
                        if (endReached) {

                        } else {
                            return <LoadMoreIndicator
                                    isVisible={isLoadingMore}
                                    animating={true}
                                />;
                        }
                    }}
                />
            </View>
        );
    }
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
    container: {
        flex:1,
        flexDirection: 'column',
        width: width,
        backgroundColor: '#f0f0f0',
    },
    emptyContainer: {
        position: 'absolute',
    },
    cellContainer: {
        backgroundColor: 'transparent',
        flexDirection: 'column',
        borderColor: '#f0f0f0',
        borderBottomWidth: 10
    },
    contentContainer: {
        marginTop: 10,
        backgroundColor: '#ededed',
        flexWrap: 'wrap'
    },
    separatorStyle: {
        height: 10,
        backgroundColor: '#ededed',
    },
    pickerStyle: {
        width,
        height:216,
    }
});