import React from 'react';
import {StyleSheet} from "react-native";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import {Entypo, MaterialCommunityIcons, Fontisto, MaterialIcons, Ionicons} from '@expo/vector-icons';
import Home from '../screen/Home';
import Menu from '../screen/Menu';
import Cart from '../screen/Cart';
import Favorite from '../screen/Favorite';
import OrderReceipt from '../screen/OrderReceipt';


const Tab = createBottomTabNavigator();

const HomeNavigator = () => {
  return (
    <Tab.Navigator screenOptions={{headerShown: false, tabBarHideOnKeyboard: true, tabBarStyle: styles.tabBarStyle}}>
        
        <Tab.Screen name='home' component={Home} 
            options={{
                tabBarLabel: "Home",
                tabBarActiveTintColor: '#DA7297',
                tabBarInactiveTintColor: 'gray',
                tabBarIcon:({focused}) => 
                    focused? (
                        <Entypo name="home" size={26} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
                    ) : (
                        <Entypo name="home" size={26} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
                )
            }}
        />
        <Tab.Screen name='menu' component={Menu} 
            options={{
                tabBarLabel: "Menu", 
                tabBarActiveTintColor: '#DA7297',
                tabBarInactiveTintColor: 'gray',
                tabBarIcon:({focused}) => 
                    focused? (
                        <Ionicons name="fast-food-sharp" size={26} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
                    ) : (
                        <Ionicons name="fast-food-sharp" size={26} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
                )
            }}
        />
        <Tab.Screen name='favorit' component={Favorite} 
            options={{
                tabBarLabel: "Favorite", 
                tabBarActiveTintColor: '#DA7297',
                tabBarInactiveTintColor: 'gray',
                tabBarIcon:({focused}) => 
                    focused? (
                        <MaterialIcons name="favorite" size={26} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
                    ) : (
                        <MaterialIcons name="favorite" size={26} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
                )
            }}
        />
        <Tab.Screen name='cart' component={Cart} 
            options={{
                tabBarLabel: "Your order", 
                tabBarActiveTintColor: '#DA7297',
                tabBarInactiveTintColor: 'gray',
                tabBarIcon:({focused}) => 
                    focused? (
                        <Fontisto name="shopping-bag" size={22} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
                    ) : (
                        <Fontisto name="shopping-bag" size={22} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
                )
            }}
        />
        <Tab.Screen name='receipt' component={OrderReceipt} 
            options={{
                tabBarLabel: "Receipt", 
                tabBarActiveTintColor: '#DA7297',
                tabBarInactiveTintColor: 'gray',
                tabBarIcon:({focused}) => 
                    focused? (
                        <Ionicons name="receipt" size={24} color="#DA7297" style={{marginTop: 5, marginBottom: 5}}/>
                    ) : (
                        <Ionicons name="receipt" size={24} color="gray" style={{marginTop: 5, marginBottom: 5}}/>
                )
            }}
        />
    </Tab.Navigator>
  )
}

export default HomeNavigator

const styles = StyleSheet.create({
    tabBarStyle: {
        height: 80,
    }
})