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

import { ChainProvider, AccountsProvider } from "./WalletPopup/hooks"
import { EmptyPage } from "./EmptyPage"

// Dynamic Imports for code splitting
const SignRequest = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.SignRequest })))
const Settings = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.Settings })))
const Welcome = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.Welcome })))
const AddAccount = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.AddAccount })))
const DeriveAccount = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.DeriveAccount })))
const DeleteAccount = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.DeleteAccount })))
const SwitchAccount = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.SwitchAccount })))
const SwitchNetwork = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.SwitchNetwork })))
const ImportAccounts = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.ImportAccounts })))
const ExportAccounts = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.ExportAccounts })))
const AccountDetails = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.AccountDetails })))
const Accounts = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.Accounts })))
const Options = lazy(() => import("./Options").then(module => ({ default: module.Options })))

export const WalletPopup = () => (
    <HashRouter>
        <ChainProvider>
            <AccountsProvider>
                <Suspense fallback={<EmptyPage />}>
                    <Routes>
                        <Route path="/" element={<Accounts />} />
                        <Route path="/welcome" element={<Welcome />} />
                        <Route path="/settings" element={<Settings />} />
                        <Route path="/options" element={<Options />} />

                        <Route path="/accounts" element={<Accounts />} />
                        <Route path="/add-account" element={<AddAccount />} />
                        <Route path="/derive-account" element={<DeriveAccount />} />
                        <Route path="/switch-account" element={<SwitchAccount />} />
                        <Route path="/import-account" element={<ImportAccounts />} />
                        <Route path="/export-accounts" element={<ExportAccounts />} />
                        <Route path="/switch-network" element={<SwitchNetwork />} />

                        <Route path="/account-details/:derivation?" element={<AccountDetails />} />
                        <Route path="/delete-account/:derivation?" element={<DeleteAccount />} />
                        <Route path="/sign-request/:signRequestId" element={<SignRequest />} />
                    </Routes>
                </Suspense>
            </AccountsProvider>
        </ChainProvider>
    </HashRouter>
)