Untitled

import * as React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { Icon, Button } from '@rneui/base';
import { DashBoard } from './Dashboard/Dashboard';
import { useAuth } from '../../../context/AuthContext';
import { POS } from '../POS/POS';
import { Calculadora } from '../Calculadora/Calculadora';
import { Ventas } from '../Ventas/Ventas';
import { Productos } from '../Productos/Productos';


function DrawerContent(props: any) {
  const { logout} = useAuth();
  return (
    <View style={styles.container}>
      <DrawerContentScrollView {...props} style={styles.drawerContent}>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      <View style={styles.footer}>
        <View style={styles.infoContainer}>
          <Text style={styles.label}>Empresa:</Text>
          <Text style={styles.value}>DTE Comges</Text>
        </View>
        <View style={styles.infoContainer}>
          <Text style={styles.label}>Rut:</Text>
          <Text style={styles.value}>11.111.111-1</Text>
        </View>
        <View style={styles.infoContainer}>
          <Text style={styles.label}>Usuario:</Text>
          <Text style={styles.value}>Admin</Text>
        </View>
        <View style={styles.infoContainer}>
          <Text style={styles.label}>Dias Plan:</Text>
          <Text style={styles.value}>xxx Dias</Text>
        </View>
        <View style={styles.infoContainer}>
          <Text style={styles.label}>Dias Certificado:</Text>
          <Text style={styles.value}>xxx Dias</Text>
        </View>
        <Button onPress={()=>{
          logout();
        }} title="Cerrar Sesión" color="#FF0000" />
        <Text style={styles.version}>Version: 1.0</Text>

      </View>

    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home" drawerContent={props => <DrawerContent {...props} />}>
          <Drawer.Screen name="Inicio" component={DashBoard}  />
          <Drawer.Screen name="POS" component={POS} options={{ headerShown: true, headerTitle: ""}}  />
          <Drawer.Screen name="Calculadora" component={Calculadora}   />
          <Drawer.Screen name="Ventas" component={Ventas}   />
          <Drawer.Screen name="Productos" component={Productos}   />
          {/* <Drawer.Screen name="Notifications" component={NotificationsScreen} /> */}
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  );
}

export function ButtonScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'flex-end', paddingBottom: 20 }}>
      <Button title="Botón Pegado Abajo" />
    </View>
  );
}

const styles = StyleSheet.create({
  bottomBar: {
    backgroundColor: 'lightgray',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
  },
  bottomBarTextContainer: {
    flexDirection: 'column',
  },
  logoutButton: {
    backgroundColor: 'red',
    borderRadius: 5,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  versionContainer: {
    position: 'absolute',
    bottom: 0,
    alignSelf: 'center',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    paddingBottom: 16,
  },
  drawerContent: {
    flexGrow: 1,
  },
  footer: {
    marginVertical: 20,
    marginHorizontal: 16,
  },
  infoContainer: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  label: {
    flex: 1,
    fontWeight: 'bold',
  },
  value: {
    flex: 2,
  },
  version: {
    marginTop: 8,
    textAlign: 'center',
    color: '#666666',
  },


});