import 'react-native-gesture-handler';

import React from 'react';
import { StyleSheet, TouchableOpacity, View, Image} from 'react-native';
//redux
import store from './src/redux/store';
import { Provider } from 'react-redux';


//navigation
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

//themes
import { COLORS } from './src/themes/Colors';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

//screens
import MainScreen from './src/screens/MainScreen';
import GroceryList from './src/screens/storageManagement/GroceryList';
import Storage from './src/screens/storageManagement/Storage';
import Products from './src/screens/storageManagement/Products';

const MyTheme = {
  dark: true,
  colors: {
    background: COLORS.dp00,
  },
};
const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();

const GroceryListTab = () => {
  return (
    <Tab.Navigator
      shifting={true}
      activeColor="#f0edf6"
      inactiveColor="#121212"
      barStyle={{ backgroundColor: COLORS.dp00 }}
    >
      <Tab.Screen name="Grocery List" component={GroceryList} options={{
        tabBarColor: '#1A2C31',
        tabBarLabel: 'Grocery List',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="format-list-bulleted" color={color} size={26} />
        ),
      }} />

      <Tab.Screen name="Storage" component={Storage} options={{
        tabBarColor: '#1d122a',
        tabBarLabel: 'Storage',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="home-analytics" color={color} size={26} />
        ),
      }} />
      <Tab.Screen name="Products" component={Products} options={{
        tabBarColor: '#081c16',
        tabBarLabel: 'Catalog',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="tag-multiple" color={color} size={26} />
        ),
      }} />
    </Tab.Navigator>
  );
}

const App = () => {
  return (
    <Provider store={store}>
      <View style={{ backgroundColor: COLORS.dp00, flex: 1 }}>
        <NavigationContainer theme={MyTheme}>
          <Stack.Navigator screenOptions={{
            headerStyle: {
              backgroundColor: 'transparent',
              // backgroundColor: COLORS.dp08 + '00',
              // elevation: 0, shadowOpacity: 0,
            }, //COLORS.dp08
            headerTintColor: COLORS.textW0,
            headerTitleStyle: { fontSize: 24 },
            cardOverlayEnabled: true,
            headerTransparent: true,
          }}>
            <Stack.Screen name="Home" component={MainScreen} options={{
              headerLeft: () => (
                < TouchableOpacity
                  onPress={() => alert('This is a button!')}
                  style={styles.button}
                >
                  <View style={styles.buttonLine} />
                  <View style={styles.buttonLine} />
                  <View style={styles.buttonLine} />
                </TouchableOpacity>
              ),
            }} />
            <Stack.Screen name="Groceries" component={GroceryListTab} />
          </Stack.Navigator>
        </NavigationContainer>
      </View>
    </Provider >
  );
}

const styles = StyleSheet.create({
  headerBackground: {
    flex: 1,
    height: 100,
    width: 300,
  },
  button: {
    alignItems: 'center',
    justifyContent: 'space-around',
    width: 50,
    height: 30,
  },
  buttonLine: {
    width: 30,
    height: 3,
    backgroundColor: '#fffb',
    borderRadius: 3,
  },
  blurredView: {
    // For me android blur did not work until applying a background color:
    backgroundColor: 'white',
    width: 100, height: 100
  },
});

export default App;

// <View style={styles.container}>
// <StatusBar translucent backgroundColor='#00000055' />
// <MainScreen/>
// </View>