import * as React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {
  Call,
  Chat,
  Dashboard,
  Rooms,
  Profile,
  Notification,
  CreateRoom,
  EditProfile,
  Settings,
  AdminProfile,
  Inbox,
} from 'screens';
import { Container, Visible } from 'components';
import { SideBar } from 'components/dashboard';
import { FullScreen } from 'components/calling';
import { NavigationRoutes } from '../enum';

const StackNavigator = createNativeStackNavigator();

export const Main: React.FC = () => {
  const isCallActive = false;

  return (
    <>
      <SideBar />
      <Visible if={isCallActive}>
        <FullScreen isPopUp={false} variant="full" />
      </Visible>
      <Container backgroundColor="base" flex={1}>
        <StackNavigator.Navigator
          screenOptions={{
            headerShown: false,
          }}
          initialRouteName={NavigationRoutes.Dashboard}
        >
          <StackNavigator.Screen name={NavigationRoutes.Dashboard} component={Dashboard} />
          <StackNavigator.Screen name={NavigationRoutes.Rooms} component={Rooms} />
          <StackNavigator.Screen name={NavigationRoutes.CreateRoom} component={CreateRoom} />
          <StackNavigator.Screen name={NavigationRoutes.Notification} component={Notification} />
          <StackNavigator.Screen name={NavigationRoutes.Profile} component={Profile} />
          <StackNavigator.Screen name={NavigationRoutes.AdminProfile} component={AdminProfile} />
          <StackNavigator.Screen name={NavigationRoutes.Call} component={Call} />
          <StackNavigator.Screen name={NavigationRoutes.EditProfile} component={EditProfile} />
          <StackNavigator.Screen name={NavigationRoutes.Room} component={Chat} />
          <StackNavigator.Screen name={NavigationRoutes.Settings} component={Settings} />
          <StackNavigator.Screen name={NavigationRoutes.Inbox} component={Inbox} />
        </StackNavigator.Navigator>
      </Container>
    </>
  );
};