import React, { Component } from 'react';
import Text from 'react-native-text';
import {StyleSheet, View, FlatList,ActivityIndicator} from 'react-native';
import Size from '../../config/size'
import { observer,inject } from 'mobx-react/native'
import ListItem from './listItem'
import { width, height } from '../../config/screen';

@inject(["menuStore"], ["userStore"])
@observer
export default class MenuFlatList extends Component{

    constructor(props) {
        super(props);
        this.store = this.props.menuStore
        this.userStore = this.props.userStore
      }

      _renderFooter(){
        if (this.store.pageNo == this.store.totalPage) {
            console.log('no more')
            return (
                <View style={{height:30,alignItems:'center',justifyContent:'flex-start',}}>
                    <Text style={{color:'#999999',fontSize:14,marginTop:5,marginBottom:5,}}>
                       No more
                    </Text>
                </View>
            );
        } else if(this.store.pageNo < this.store.totalPage) {
            console.log('loading')
            return (
                <View style={styles.footer}>
                    <ActivityIndicator />
                    <Text>Loading...</Text>
                </View>
            );
        }else{
            return null
        } 

            
        
    }

    _onEndReached(){
  
        if(this.store.loading){
            console.log('pull loading')
            return ;
        }

        if((this.store.pageNo!=1) && (this.store.pageNo>=this.store.totalPage)){
            console.log('last page')
            return;
        } else {
            console.log( 'pull load more ')
            this.store.pageNo++;
            console.log(this.store.pageNo)
            this.store.menuloadmore()
        }
      
}


    render(){
        return(
           <FlatList
           data = {this.props.data.data.content}
           renderItem = {({item,index}) => <ListItem items = {item} index = {index}
           screenWidth = {width}
           menu = {this.props.menu}
           />}
           //refreshing={this.store.loading}
           //onRefresh = {()=>{console.log('reload'); this.store.getMenuItem(this);}}
          // ListFooterComponent={this._renderFooter.bind(this)}
          // onEndReached= {this._onEndReached.bind(this)}
         //  onEndReachedThreshold={10}//执行上啦的时候10%执行       
           />

          
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    title: {
        fontSize: 15,
        color: 'blue',
    },
    footer:{
        flexDirection:'row',
        height:24,
        justifyContent:'center',
        alignItems:'center',
        marginBottom:10,
    },
    content: {
        fontSize: 15,
        color: 'black',
    }
});