'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import CouponFliter from './CouponFliter';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import NoDataView from './NoDataView';
import CouponCell from './CouponCell';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';

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



export default class Coupon extends Component {

    constructor(props) {
        super(props);

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

    }

    shouldComponentUpdate(nextProps){

        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }

    _renderRow(rowData, sectionID, rowID) {
        let {resource} = this.props;
        let fliter = resource.get('fliter');
        return(
            <CouponCell usedType={fliter} index={rowID} resource={rowData} showCouponDetail={this.props.showCouponDetail} onPressUseNow={this.props.onPressUseNow}/>
        );
    }

    render() {

        let {resource} = this.props;

        if (!resource) {
            return null;
        }
        let fliter = resource.get('fliter');
        let unuseCoupon = resource.get('unuseCoupon');
        let usedCoupon = resource.get('usedCoupon');
        let coupons = fliter==0?unuseCoupon:usedCoupon;
        let endReached = coupons.get('endReached');
        let currentPage = coupons.get('currentPage');
        let dataList = coupons.get('couponList');
        let isFetching = coupons.get('isFetching') && currentPage == 0;
        let error = coupons.get('error');
        let showNoContent = ((error || dataList.size == 0) && !isFetching);
        let isLoadingMore = coupons.get('isFetching') && currentPage > 0;

        return (
            <View style={styles.container}>
                <CouponFliter
                    selectID={fliter}
                    onPressFilter={this.props.onPressFilter}
                />
                {showNoContent ? <NoDataView onPressMore={this.props.onPressMore}/> : <ListView
                    enableEmptySections={true}
                    initialListSize={5}
                    dataSource={this.dataSource.cloneWithRows(dataList.toArray())}
                    renderRow={this._renderRow}
                    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();
                        }
                    }}
                />}
                <LoadingIndicator
                    isVisible={isFetching}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    placeholder: {
        width,
        height: 15,
    },
});