import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Image } from 'react-native';
import CameraScreen from '../component/video/camera';
import Session from '../screens/session';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
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>
  );
}