import { Routes, Route } from 'react-router-dom';

import UserExist from './component/authorization/UserExist';
import AuthLayout from './component/auth/AuthLayout';
import siteLinks from './links/siteLinks';

import LoginPage from './views/LoginPage';
import SignupPage from './views/SignupPage';
import ForgetpwdPage from './views/ForgetpwdPage';
import HomePage from './views/HomePage';
import ReportsPage from './views/ReportsPage'
import CommentsPage from './views/CommentsPage'
import ContactsPage from './views/ContactsPage'
import UserPage from './views/UserPage'
import CalendarPage from './views/CalendarPage'
import SettingsPage from './views/SettingsPage'
import ProductPage from './views/ProductPage'
import SocketIOContextProvider from './component/context/SocketIOContext';

function AppRouters() {
  return (
    <div className="">
      <Routes>
        {/* auth routes wrapper */}
        <Route element={<AuthLayout />}>
          <Route path={siteLinks.home} element={<LoginPage />} />
          <Route path={siteLinks.login} element={<LoginPage />} />
          <Route path={siteLinks.signup} element={<SignupPage />} />
          <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
          <Route path={siteLinks.error} element={<ForgetpwdPage />} />
        </Route>

        {/* protected routes */}
        <Route element={<SocketIOContextProvider />}>
          <Route element={<UserExist />}> 
            <Route path={siteLinks.dash} element={<HomePage />} />
            <Route path={siteLinks.product} element={<ProductPage />} />
            <Route path={siteLinks.reports} element={<ReportsPage />} />
            <Route path={siteLinks.comments} element={<CommentsPage />} />
            <Route path={siteLinks.contacts} element={<ContactsPage />} />
            <Route path={siteLinks.user} element={<UserPage />} />
            <Route path={siteLinks.calendar} element={<CalendarPage />} />
            <Route path={siteLinks.settings} element={<SettingsPage />} />
          </Route>
        </Route>
      </Routes>
    </div>
  );
}

export default AppRouters;