import {Suspense} from 'react'
import {Routes, Route} from 'react-router-dom'
import RouteLinks from './RouteLinks'

import UserExist from './authorization/UserExist'
import PageLoader from './components/PageLoader'

import LoginPage from './pages/LoginPage' // LOGIN PAGE
import HomePage from './pages/HomePage' // Home PAGE
import CustomerPage from './pages/CustomerPage' // REPAYMENTS PAGE
import SubscriptionsPage from './pages/SubscriptionsPage' // TRANSACTIONS PAGE
import BillingsPage from './pages/BillingsPage' // LOAN CHARGES PAGE
import UsersAdminPage from "./pages/UsersAdminPage"; // ADMIN USERS PAGE
import RecentSignupPage from "./pages/RecentSignupPage"; // RECENT SIGNUP PAGE
import ProductsPage from './pages/ProductsPage' // PRODUCTS PAGE
import ErrorPage from './pages/ErrorPage';

import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
import TransactionDetailsPage from './pages/TransactionDetailsPage'
import AccountDetailsPage from "./pages/AccountDetailsPage";
import ProductTemplatePage from "./pages/ProductTemplatePage";
import CustomTemplatePage from "./pages/CustomTemplatePage";
import SubscriptionDetailsPage from "./pages/SubscriptionDetailsPage"; // TRANSACTION DETAILS PAGE


// const Home = lazy(() => import('./pages/Home'));

export default function SiteRoutes() {
    return (
        <Routes>
            <Route path={RouteLinks.loginPage} element={<LoginPage/>}/> {`*/LOGIN PAGE*/`}

            <Route element={<UserExist/>}>
                <Route path={RouteLinks.homePage} element={<HomePage/>}/> {`*/HOME PAGE*/`}
                <Route path={RouteLinks.recentSignup} element={<RecentSignupPage/>}/> {`*/RECENT SIGNUP PAGE*/`}
                <Route path={RouteLinks.subscriptions} element={<SubscriptionsPage/>}/> {`*/SUBSCRIPTIONS PAGE*/`}
                <Route path={RouteLinks.customerPage} element={<CustomerPage/>}/> {`*/CUSTOMER PAGE*/`}
                <Route path={RouteLinks.accountDetails} element={<AccountDetailsPage/>}/> {`*/CUSTOMER PAGE*/`}
                <Route path={RouteLinks.billings} element={<BillingsPage/>}/> {`*/BILLINGS PAGE*/`}
                <Route path={RouteLinks.products} element={<ProductsPage/>}/> {`*/PRODUCTS PAGE*/`}
                <Route path={RouteLinks.usersAdmin} element={<UsersAdminPage/>}/> {`*/ADMIN USERS PAGE*/`}

                <Route path={RouteLinks.productTemplates} element={<ProductTemplatePage/>}/> {`*/PRODUCTS TEMPLATE PAGE*/`}
                <Route path={RouteLinks.customTemplates} element={<CustomTemplatePage/>}/> {`*/CUSTOM TEMPLATES PAGE*/`}

                <Route path={RouteLinks.loansPage} element={<LoansPage/>}/> {`*/LOANS PAGE*/`}
                <Route path={RouteLinks.transaction_details_page}
                       element={<TransactionDetailsPage/>}/> {`*/TRANSACTION PAGE*/`}
                <Route path={RouteLinks.subscriptionDetails} element={<SubscriptionDetailsPage/>} />
            </Route>

            {/* ERROR PAGE */}
            <Route
                path={RouteLinks.errorPage} // error page
                element={
                    <Suspense fallback={<PageLoader/>}>
                        <ErrorPage/>
                    </Suspense>
                }
            />
        </Routes>
    )
}