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 Profile from "../screens/profile";
import Session from "../screens/session-stack/session";
import SessionFeed from "../screens/session-stack/session-feed";
import VideoDetails from "../screens/video-stack/video-details";
import { tabIconColors } from "../styles";

import Icon from "../assets/icons/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 = {
	SessionStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
	VideoStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
	Profile: <Image source={Icon} style={{ width: 20, height: 20 }} />,
};

function VideoTabStack() {
	return (
		<RecordStack.Navigator screenOptions={{ headerShown: false }}>
			<RecordStack.Screen
				name="Record"
				component={VideoDetails}
				initialParams={{ mode: "start-video" }}
			/>
			<RecordStack.Screen name="Camera" component={CameraScreen} />
			<RecordStack.Screen
				name="SaveVideo"
				component={VideoDetails}
				initialParams={{ mode: "save-video" }}
			/>
		</RecordStack.Navigator>
	);
}

function SessionTabStack() {
	return (
		<RecordStack.Navigator screenOptions={{ headerShown: false }}>
			<RecordStack.Screen name="SessionFeed" component={SessionFeed} />
			<RecordStack.Screen name="Session" component={Session} />
		</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: tabIconColors.selected,
				tabBarInactiveTintColor: tabIconColors.default,
				tabBarIcon: () => {
					return tabIcons[route.name];
				},
			})}
		>
			<Tab.Screen
				name="SessionStack"
				component={SessionTabStack}
				options={{ tabBarLabel: "Session" }}
			/>
			<Tab.Screen
				name="VideoStack"
				component={VideoTabStack}
				options={{ tabBarLabel: "Record" }}
			/>
			<Tab.Screen
				name="Profile"
				component={Profile}
				options={{ tabBarLabel: "Profile" }}
			/>
		</Tab.Navigator>
	);
}