import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Image } from 'react-native';
import CameraScreen from '../component/video/camera';
import Session from '../screens/session';

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

const Tab = createBottomTabNavigator();

// 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 }} />,
  'Camera': <Image source={Icon} style={{ width: 20, height: 20 }} />,
};

/**
 * 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} />
      <Tab.Screen name="Camera" component={CameraScreen} />
    </Tab.Navigator>
  );
}