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

import { Layout, Sidebar, Header } from "../components"
import { UnstableProviderProvider, MetadataProviderProvider } 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>
                        <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>
                    </MetadataProviderProvider>
                </UnstableProviderProvider>
            </Suspense>
        </HashRouter>

    )
}