import { lazy, Suspense } from "react"
import { HashRouter, Routes, Route, Navigate } from "react-router-dom"

import { Layout, Sidebar, Header } from "../components"
import {
    UnstableProviderProvider,
    MetadataProviderProvider,
    TransactionStatusProviderProvider,
} from "../hooks"
import { DEFAULT_CHAIN_ID } from "../settings"

const HealthCheck = lazy(() => import("./HealthCheck").then(module => ({ default: module.HealthCheck })))
const Transactions = lazy(() => import("./Transactions").then(module => ({ default: module.Transactions })))
const Nominations = lazy(() => import("./Nominations").then(module => ({ default: module.Nominations })))
const AddressBook = lazy(() => import("./AddressBook").then(module => ({ default: module.AddressBook })))

export const App = () => {
    return (
        <HashRouter>
            <Suspense fallback={<div></div>}>
                <UnstableProviderProvider defaultChainId={DEFAULT_CHAIN_ID}>
                    <MetadataProviderProvider>
                        <TransactionStatusProviderProvider>
                            <Layout>
                                <Sidebar />
                                <div style={{ maxWidth: "calc(100% - 100px)"}} className="w-full h-full flex flex-col sm:px-6 px-2 sm:py-8 py-2">
                                    <Header />
                                    <Routes>
                                        <Route path="/health" element={<HealthCheck />} />
                                        <Route path="/transactions" element={<Transactions />} />
                                        <Route path="/book" element={<AddressBook />} />
                                        <Route path="/nominations" element={<Nominations />} />
                                        <Route path="*" element={<Navigate to="/health" replace />} />
                                    </Routes>
                                </div>
                            </Layout>
                        </TransactionStatusProviderProvider>
                    </MetadataProviderProvider>
                </UnstableProviderProvider>
            </Suspense>
        </HashRouter>

    )
}
