import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { NavigationActions } from 'react-navigation';
import { ScrollView, View, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Size from '../config/size'
import Text from 'react-native-text';
const size = new Size
import { observer,inject } from 'mobx-react/native';
import {scale, verticalScale, moderateScale } from 'react-native-size-matters';
import AsyncStorageHelper from "../config/asyncStorageHelper";
const asyncStorageHelper = new AsyncStorageHelper();
const items = [{id: 0,title:"Menu of the Day", icon:"md-beer",screen: "menu"},
               {id: 1, title:"My Orders", icon:"md-list-box",screen: "myOrders"},
               {id: 2, title:"Account", icon:"md-contact",screen: "account"},
               {id: 3, title:"Settings", icon:"md-settings",screen: "settings"},]

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

  

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

    onPressAction(screen){
        this.props.navigation.navigate('DrawerClose')
        console.log(this.store.logined +screen)
        if(this.store.logined){
            //this.navigateToScreen('account')
            this.props.navigation.navigate(screen)
        }else{
        this.props.navigation.navigate('Login')
        }
    }

    renderItems(){
        return items.map((item) => {
            return (
                <TouchableOpacity style = {{flexDirection:'row',marginBottom:20,marginLeft:10}}
                onPress = {()=>this.onPressAction(item.screen)} key = {item.id}>
                <Icon name={item.icon} size={size.getSize(24)} color={'black'} />
                <Text style = {{fontSize: 20,marginLeft: 5,}}>
                {item.title}
                </Text>
                </TouchableOpacity>
            );
        });
    }

    render() {
        return (
            <View style={{ flex: 1 }}>

            <View style={{backgroundColor:'gray',height:100,alignItems:'center',justifyContent: 'center',paddingBottom:20}}>
            <Text>
                Hello
            </Text>
            </View>

            <ScrollView>
            {this.renderItems()}
            </ScrollView>
            
            <View style = {{borderTopColor:'black', borderTopWidth:1, height:verticalScale(200),alignItems:'center',justifyContent: 'center',}}>
            <Icon name={'md-mail'} size={size.getSize(60)} color={'black'} onPress = {()=>{  asyncStorageHelper.removeItemValue("pickupPointId")}} />
            </View>

            </View>
        )

    }

}