import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { Image, StyleSheet, Text, View } from 'react-native';

import HomeScreen from './HomeScreen';

import AddElderScreen from './AddElderScreen';

import ConnectDeviceScreen from './ConnectDeviceScreen';

const Tab = createBottomTabNavigator();

const tabBarIcon = (route, focused, color, size) => {

    let iconName;

    if (route.name === 'Home') {

        iconName = require('./assets/home.png');

    } else if (route.name === 'Add Elder') {

        iconName = require('./assets/add.png');

    } else if (route.name === 'Connect Device') {

        iconName = require('./assets/device.png');

    }

    return <Image source={iconName} style={{ width: size, height: size }} />;

};

const screenOptions = ({ route }) => ({

    tabBarIcon: ({ focused, color, size }) =>

        tabBarIcon(route, focused, color, size),

    tabBarActiveTintColor: '#2D328C',

    tabBarInactiveTintColor: 'gray',

    tabBarStyle: {

        height: 60, // Increase height

        paddingBottom: 10, // Adjust padding to give some margin

    },

    tabBarIconStyle: {

        marginBottom: 0, // Adjust icon margin bottom

    },

    tabBarLabelStyle: {

        fontSize: 16, // Default font size

        fontWeight: 'normal', // Default font weight

    },

    tabBarLabel: ({ focused, color }) => (

        <Text

            style={{

                fontSize: focused ? 14 : 12, // Larger font size for selected

                fontWeight: focused ? 'bold' : 'normal', // Bold for selected

                color: color, // Use the color provided by tabBarActiveTintColor or tabBarInactiveTintColor

            }}>

            {route.name}

        </Text>

    ),

    headerTitleAlign: 'left',

    headerTitle: ({ focused }) => (

        <View style={{ flexDirection: 'row', alignItems: 'center' }}>

            {tabBarIcon(route, focused, '#2D328C', 25)}

            <Text

                style={{

                    marginLeft: 10,

                    fontSize: 18,

                    color: '#2D328C',

                    fontWeight: 'bold',

                }}>

                {route.name}

            </Text>

        </View>

    ),

});

export default function App() {

    return (

        <NavigationContainer>

            <Tab.Navigator

                initialRouteName="Home"

                screenOptions={screenOptions}>

                <Tab.Screen name="Home" component={HomeScreen} />

                <Tab.Screen name="Add Elder" component={AddElderScreen} />

                <Tab.Screen

                    name="Connect Device"

                    component={ConnectDeviceScreen}

                />

            </Tab.Navigator>

        </NavigationContainer>

    );

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

        backgroundColor: '#fff',

        alignItems: 'center',

        justifyContent: 'center',

    },

});