import { AntDesign, Entypo, FontAwesome, FontAwesome5, Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
import { useColors } from './common/colors';
import Calendar from './screens/Calendar';
import Dashboard from './screens/Dashboard';
import Schedule from './screens/Schedule';
import Settings from './screens/Settings';
import Search from './screens/Search';
import { View, Text, Image, StyleSheet } from 'react-native';

const Tab = createBottomTabNavigator();

const BottomTabs = () => {
    const colors = useColors();
    return (
        <Tab.Navigator
            screenOptions={{
                tabBarStyle: { backgroundColor: colors.backSecondary },
                tabBarActiveTintColor: colors.primary,
                tabBarInactiveTintColor: colors.text,
                headerStyle: {
                    backgroundColor: colors.backSecondary,
                },
                tabBarShowLabel: false,
            }}
        >
            <Tab.Screen name="Dashboard" component={Dashboard} options={{
                tabBarHideOnKeyboard: true,
                headerTitle: () => <CustomHeaderTitle title="Dashboard" />,
                tabBarIcon: ({ color, size }) => <Entypo name="home" size={size} color={color} />
            }} />
            <Tab.Screen name="Schedule" component={Schedule} options={{
                tabBarHideOnKeyboard: true,
                headerTitle: () => <CustomHeaderTitle title="Stundenplan" />,
                tabBarIcon: ({ color, size }) => <AntDesign name="table" size={size} color={color} />
            }} />
            <Tab.Screen name="Calendar" component={Calendar} options={{
                tabBarHideOnKeyboard: true,
                headerTitle: () => <CustomHeaderTitle title="Kalender" />,
                tabBarIcon: ({ color, size }) => <FontAwesome5 name="calendar-day" size={size} color={color} />
            }} />
            <Tab.Screen name="Search" component={Search} options={{
                tabBarHideOnKeyboard: true,
                headerTitle: () => <CustomHeaderTitle title="Freie Räume" />,
                tabBarIcon: ({ color, size }) => <FontAwesome name="search" size={size} color={color} />
            }} />
            <Tab.Screen name="Settings" component={Settings} options={{

                tabBarHideOnKeyboard: true,
                headerTitle: () => <CustomHeaderTitle title="Einstellungen" />,
                tabBarIcon: ({ color, size }) => <Ionicons name="settings-sharp" size={size} color={color} />
            }} />
        </Tab.Navigator >
    );
};

export default BottomTabs;


const CustomHeaderTitle = ({ title }) => {
  const colors = useColors();
  return (
    <View style={styles.container}>
      <Image source={require('./assets/favicon.png')} style={styles.logo} />
      <Text style={[styles.title, {color: colors.text}]}>KlaTab - {title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  logo: {
    width: 30,
    height: 30,
    marginRight: 8,
  },
  title: {
    fontSize: 18,
  },
});