import { BrowserRouter, Routes, Route, Outlet, Navigate } from 'react-router-dom';
import { Landing } from 'screens/landing/Landing.web';
import { useAppConfiguration, useResponsiveLayout, useSession, useSettings } from 'hooks';
import { AdminProfile, Dashboard, NotFound, Rooms, Inbox } from 'screens';
import { SideBar, TopBar } from 'components/dashboard';
import { metrics } from 'config';
import { Container, SafeScreen, Visible } from 'components';
import { Room } from 'screens/room';
import { FullScreen } from 'components/calling';
import { isHideSideBarVar, isRoomPageVar } from 'state-management/settings';
import { useReactiveVar } from '@apollo/client';
import { PortalProvider } from '@gorhom/portal';
import { DialogProvider } from 'context/dialog';
import { isLoggedInVar } from 'state-management/session';
import { PATH_PAGES } from './web';
import { Auth } from './guards';

const { STYLES } = metrics;

const NavigationWrapper = () => {
  return <Outlet />;
};

export function Navigation() {
  const { isSideBarOpen, isSideBarCollapsed } = useSettings();
  const { isDesktop } = useResponsiveLayout();
  const { loadingSession } = useSession();
  const isLoggedIn = useReactiveVar(isLoggedInVar);

  const { loading } = useAppConfiguration();
  const isRoomPage = useReactiveVar(isRoomPageVar);
  const isHideSideBar = useReactiveVar(isHideSideBarVar);
  const isRoomPageOpen = isLoggedIn && isRoomPage;
  const isDesktopSideBarClose = isLoggedIn && isDesktop && !isSideBarOpen;

  const isCallActive = false;

  const isDesktopClosed = isDesktopSideBarClose ? STYLES.sideBarWidth : 0;
  const isRoomPageOpened = isRoomPageOpen ? 0 : isDesktopClosed;
  const sideBarCollapsed = isSideBarCollapsed ? STYLES.sideBarCollapseWidth : isRoomPageOpened;
  const ml = isHideSideBar ? 0 : sideBarCollapsed;
  if (loadingSession || loading) {
    return <SafeScreen />;
  }
  return (
    <BrowserRouter>
      <Visible if={isLoggedIn}>
        <DialogProvider>
          <PortalProvider>
            <Visible if={!isHideSideBar}>
              <>
                <SideBar />
                <TopBar />
              </>
            </Visible>
            <Visible if={isCallActive}>
              <FullScreen isPopUp={false} variant="full" />
            </Visible>
            <Container
              position="absolute"
              top={0}
              bottom={0}
              left={0}
              right={0}
              backgroundColor="base"
              ml={ml}
            >
              <Routes>
                <Route path="/" element={<NavigationWrapper />}>
                  <Route path="" element={<Navigate to={PATH_PAGES.dashboard} />} />
                  <Route
                    path={PATH_PAGES.dashboard}
                    element={
                      <Auth>
                        <Dashboard />
                      </Auth>
                    }
                  />
                  <Route
                    path={PATH_PAGES.rooms}
                    element={
                      <Auth>
                        <Rooms />
                      </Auth>
                    }
                  />
                  <Route
                    path={PATH_PAGES.room}
                    element={
                      <Auth>
                        <Room />
                      </Auth>
                    }
                  />
                  <Route
                    path={PATH_PAGES.admin_profile}
                    element={
                      <Auth>
                        <AdminProfile />
                      </Auth>
                    }
                  />
                  <Route path={PATH_PAGES.landing} element={<Landing />} />
                  <Route
                    path={PATH_PAGES.new_space}
                    element={<Navigate to={PATH_PAGES.dashboard} />}
                  />

                  <Route path={PATH_PAGES.inbox} element={<Inbox />} />

                  <Route path="*" element={<NotFound />} />
                </Route>
              </Routes>
            </Container>
          </PortalProvider>
        </DialogProvider>
      </Visible>
      <Visible if={!isLoggedIn}>
        <Landing />
      </Visible>
    </BrowserRouter>
  );
}