import { Entypo, FontAwesome, Ionicons } from "@expo/vector-icons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import TransactionHistoryScreen from "@screens/TransactionHistoryScreen";
import UserProfileScreen from "@screens/UserProfileScreen";
import { useTheme } from "@shopify/restyle";
import type { Theme } from "@themes/Theme";
import { Text, View } from "react-native";

import PaymentStackNavigator from "./PaymentStackNavigation";

const Tab = createBottomTabNavigator();

export const AppBottomTabsNavigator = () => {
	const theme = useTheme<Theme>();

	return (
		<Tab.Navigator
			initialRouteName="Acceuil"
			screenOptions={{ headerShown: false, animation: "shift", tabBarHideOnKeyboard: true }}
		>
			<Tab.Screen
				name="Acceuil"
				component={PaymentStackNavigator}
				options={{
					tabBarIcon: ({ color, size }) => (
						<Entypo name="home" size={size} color={color} />
					),
					tabBarActiveTintColor: theme.colors.secondary,
				}}
			/>
			<Tab.Screen
				name="Transactions"
				component={TransactionHistoryScreen}
				options={{
					tabBarIcon: ({ color, size }) => (
						<FontAwesome name="exchange" size={size} color={color} />
					),
					tabBarActiveTintColor: theme.colors.secondary,
				}}
			/>
			<Tab.Screen
				name="Paramètres"
				component={SettingsScreen}
				options={{
					tabBarIcon: ({ color, size }) => (
						<Ionicons name="settings-outline" size={size} color={color} />
					),
					tabBarActiveTintColor: theme.colors.secondary,
				}}
			/>
			<Tab.Screen
				name="Profile"
				component={UserProfileScreen}
				options={{
					tabBarIcon: ({ color, size }) => (
						<Ionicons name="person" size={size} color={color} />
					),
					tabBarActiveTintColor: theme.colors.secondary,
				}}
			/>
		</Tab.Navigator>
	);
};

const SettingsScreen = () => {
	return (
		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
			<Text>Settings!</Text>
		</View>
	);
};