import {StyleSheet, View} from 'react-native';
import {NavigationContainer} from "@react-navigation/native";
import 'react-native-gesture-handler';
import {createStackNavigator} from "@react-navigation/stack";
import Home from "./screens/home";
import Login from "./screens/login";
import Event from "./screens/event";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";

import TaskIconActive from "./assets/taskIconActive.svg";
import TaskIcon from "./assets/taskIconInactive.svg"
import NotificationIconActive from "./assets/notificationActive.svg";
import NotificationIconInactive from './assets/notificationInactive.svg'

const generateTabBarIcon = ({focused, style}) => {
    const styles = {
        taskIcon: {
            focused: <TaskIconActive width={25} height={25}/>,
            default: <TaskIcon width={25} height={25}/>
        },

        notificationIcon: {
            focused: <NotificationIconActive width={25} height={25}/>,
            default: <NotificationIconInactive width={25} height={25}/>
        }
    }

    return !!focused ? styles[style].focused : styles[style].default

}

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();


const HomeStack = () => (
    <Stack.Navigator initialRouteName={"Home"} screenOptions={{headerShown: false}}>
        <Stack.Screen name="Login" component={Login}/>
        <Stack.Screen name="Home" component={Home}/>
        <Stack.Screen name="Event" component={Event}/>
    </Stack.Navigator>

)

export default function App() {

    return (
        <View style={styles.container}>
            <NavigationContainer>
                <Tab.Navigator initialRouteName={"HomeStack"} screenOptions={{
                    headerShown: false,
                    tabBarActiveTintColor: '#E5352D',
                    tabBarInactiveTintColor: "rgba(100, 101, 103, 0.5)",
                    tabBarLabelStyle: {fontSize: 10, fontWeight: "bold"}
                }}>
                    <Tab.Screen name="HomeStack" component={HomeStack} options={{
                        tabBarLabel: "Задания",
                        tabBarIcon: ({focused}) => generateTabBarIcon({focused, style: "taskIcon"})
                    }}/>
                    <Tab.Screen name="Notification"
                                component={() => <View></View>}
                                options={
                                    {
                                        tabBarLabel: "Уведомления",
                                        tabBarIcon: ({focused}) => generateTabBarIcon({
                                            focused,
                                            style: "notificationIcon"
                                        })
                                    }
                                }
                    />
                </Tab.Navigator>

            </NavigationContainer>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
});