import {StyleSheet, View} from 'react-native';
import {NavigationContainer, useNavigation} 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 Notification from "./screens/notfication";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";

import Database from './db'

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

import InputScreen from "./screens/InputScreen";
import TaskStore, {getTasks} from "./store/taskStore";
import {useSnapshot} from "valtio";
import {useEffect} from "react";
import {getSubtasks} from "./store/subtaskStore";
import NotificationStore, {getNotifications} from "./store/notificationStore";
import {getEvents} from "./store/eventStore";


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 = () => {

    return (<Stack.Navigator initialRouteName={"Home"} screenOptions={{headerShown: false}}>
            <Stack.Screen name="Home" component={Home}/>
            <Stack.Screen name="Event" component={Event}/>
            <Stack.Screen name="InputEvent" component={() => <InputScreen title={'Добавить событие'}/>}/>
        </Stack.Navigator>

    )
}


const MainNavigator = () => {
    const {newTaskBadge} = useSnapshot(TaskStore)
    const {newNotificationBadge} = useSnapshot(NotificationStore)
    return (
        <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"}),
                tabBarBadge: newTaskBadge === 0 ? undefined : newTaskBadge,
            }}/>
            <Tab.Screen name="Notification"
                        component={Notification}
                        options={
                            {
                                tabBarLabel: "Уведомления",
                                tabBarIcon: ({focused}) => generateTabBarIcon({
                                    focused,
                                    style: "notificationIcon"
                                }),
                                tabBarBadge: newNotificationBadge === 0 ? undefined : newNotificationBadge
                            }
                        }
            />


        </Tab.Navigator>)
}


const LoginStack = () => {
    return (
        <Stack.Navigator initialRouteName={"Login"} screenOptions={{headerShown: false}}>
            <Stack.Screen name={"login"} component={Login}></Stack.Screen>
            <Stack.Screen name={"MainNavigator"} component={MainNavigator} />
        </Stack.Navigator>)
}

export default function App() {
    useEffect(() => {

        // All preloaded data

        // todo this functions should be called
        //  background process

        getTasks();  // todo check to be sync
        getSubtasks();
        getNotifications();
        getEvents()

        setInterval(getTasks, 10000)
        setInterval(getSubtasks, 10000)
        setInterval(getNotifications, 10000)
        setInterval(getEvents, 10000)
    }, []);

    return (
        <View style={styles.container}>
            <NavigationContainer>
                <LoginStack/>
            </NavigationContainer>
        </View>
    );
}

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