import React from 'react';
import {Text, View, StatusBar, StyleSheet, Button} from 'react-native';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';

const Sidebar = ({navigation}) => (
  <View style={styles.container}>
    <Text style={styles.text}>Sidebar</Text>
    <Button title="Close Sidebar" onPress={() => navigation.closeDrawer()} />
  </View>
);

const Home = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Button title="Open Sidebar" onPress={() => navigation.openDrawer()} />
    </View>
  );
};

const Routes = createStackNavigator({Home: {screen: Home}}, {mode: 'card', headerMode: 'none'});

const Drawer = createDrawerNavigator(
  {DefaultRoutes: Routes},
  {
    contentComponent: Sidebar,
    drawerType: 'slide',
    drawerWidth: 300,
  },
);

const AppContainer = createAppContainer(Drawer);

const App = () => {
  return (
    <>
      <StatusBar backgroundColor="#121212" barStyle="light-content" />
      <AppContainer />
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#121212',
  },
  text: {
    fontSize: 18,
    color: '#eeeeee',
    marginBottom: 14,
  },
});

export default App;