import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Image } from "react-native";
import CameraScreen from "../component/video/camera";
import Session from "../screens/session";
import RecordScreen from "../screens/video-stack/record";

// TODO: add ts support for assets folder to use imports
const Icon = require("../assets/favicon.png");

const Tab = createBottomTabNavigator();
const RecordStack = createNativeStackNavigator();

// tabBarIcon configuration should live on separate file and contain all logic/icons/rendering for the Tabs
const tabIcons = {
	Session: <Image source={Icon} style={{ width: 20, height: 20 }} />,
	VideoStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
};

function VideoTabStack() {
	return (
		<RecordStack.Navigator screenOptions={{ headerShown: false }}>
			<RecordStack.Screen name="Record" component={RecordScreen} />
			<RecordStack.Screen name="Camera" component={CameraScreen} />
		</RecordStack.Navigator>
	);
}

/**
 * Functional component creating a tab navigator with called
 * Uses React Navigation's Tab.Navigator. Customizes tab bar appearance and icons.
 * Import screens and call them on component of Tab.Screen.
 *
 * @returns {React.ComponentType} A Tab.Navigator component with bottom tabs with screens.
 */

export default function Tabs(): React.JSX.Element {
	return (
		<Tab.Navigator
			screenOptions={({ route }) => ({
				headerShown: false,
				tabBarActiveTintColor: "tomato",
				tabBarInactiveTintColor: "gray",
				tabBarIcon: () => {
					return tabIcons[route.name];
				},
			})}
		>
			<Tab.Screen
				name="Session"
				component={Session}
				options={{ tabBarLabel: "Session" }}
			/>
			<Tab.Screen
				name="VideoStack"
				component={VideoTabStack}
				options={{ tabBarLabel: "Record" }}
			/>
		</Tab.Navigator>
	);
}