import React from 'react';
import {Header, HomeScreen} from "./components/HomeScreen";
import {NavigationContainer} from "@react-navigation/native";
import Ionicons from "react-native-vector-icons/Ionicons";
import {NewListScreen} from "./components/NewListScreen";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import {useDB} from "./context/DBcontex";

const Tab = createBottomTabNavigator();


export const Root = () => {

    const {lists} = useDB();

    return (
        <>
            <Header/>
            <NavigationContainer>
                <Tab.Navigator
                    screenOptions={({route}) => ({
                        tabBarIcon: ({focused, color, size}) => {
                            let iconName;

                            if (route.name === 'Home') {
                                iconName = focused
                                    ? 'home-outline'
                                    : 'home-outline';
                            } else if (route.name === 'Add New List') {
                                iconName = focused
                                    ? 'duplicate-outline'
                                    : 'duplicate-outline';
                            }
                            // You can return any component that you like here!
                            return <Ionicons name={iconName} size={size} color={color}/>;
                        },
                    })}
                    tabBarOptions={{
                        activeTintColor: '#53abbf',
                        inactiveTintColor: 'grey',
                        keyboardHidesTabBar: true,
                        style: {backgroundColor: '#1C2833'}
                    }}
                >
                    <Tab.Screen name="Home" component={HomeScreen} options={{tabBarBadge: lists.length}}/>
                    <Tab.Screen name="Add New List" component={NewListScreen}/>
                </Tab.Navigator>
            </NavigationContainer>
        </>
    )
}