import React, { Component } from 'react';
import { View } from 'react-native';
import { connect } from 'redux-su';
import IconComponent from 'react-native-vector-icons/Ionicons';
import Login from './Components/Login';
import Map from './Components/Map';
import PortalPanel from './Components/PortalPanel';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Settings from './Components/Settings';

const MapNavigator = createStackNavigator({
  Map: {
    screen: Map,
    navigationOptions: {
      header: null,
    }
  },
  Portal: {
    screen: PortalPanel,
  },
});

const AppNavigator = createBottomTabNavigator({
  Map: {
    screen: MapNavigator,
    navigationOptions: {
      tabBarLabel: 'Карта',
      tabBarIcon: ({tintColor}) => <IconComponent name={'ios-map'} size={25} color={tintColor} />
    }
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
      tabBarLabel: 'Настройки',
      tabBarIcon: ({tintColor}) => <IconComponent name={'ios-settings'} size={25} color={tintColor} />
    }
  }
})

const AppContainer = createAppContainer(AppNavigator)
class App extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        {this.props.auth.user ? <AppContainer /> : <Login />}
      </View>
    );
  }
}

export default connect({ 'auth': 'auth' }, {})(App)