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

import { ProtectedRoute } from "./WalletPopup/components"
import { KeyringProvider } from "./WalletPopup/hooks"
import { EmptyPage } from "./EmptyPage"

// Dynamic Imports for code splitting
const UnlockKeyring = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.UnlockKeyring })))
const SignRequest = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.SignRequest })))
const Settings = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.Settings })))
const ChangePassword = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.ChangePassword })))
const Welcome = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.Welcome })))
const AddAccount = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.AddAccount })))
const SwitchAccount = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.SwitchAccount })))
const ImportAccounts = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.ImportAccounts })))
const AccountDetails = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.AccountDetails })))
const AddChainByUser = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.AddChainByUser })))
const Accounts = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.Accounts })))
const DeleteWallet = lazy(() => import("./WalletPopup/pages").then(module => ({ default: module.DeleteWallet })))
const Options = lazy(() => import("./Options").then(module => ({ default: module.Options })))
const CreatePassword = lazy(() => import("./WalletPopup/pages/CreatePassword").then(module => ({ default: module.CreatePassword })))
const Networks = lazy(() => import("./WalletPopup/pages/Networks").then(module => ({ default: module.Networks })))

export const WalletPopup = () => (
    <HashRouter>
        <KeyringProvider>
            <Suspense fallback={<EmptyPage />}>
                <Routes>
                    <Route element={<ProtectedRoute />}>
                        <Route path="/" element={<Accounts />} />
                        <Route path="/settings" element={<Settings />} />
                        <Route path="/change-password" element={<ChangePassword />} />
                        <Route path="/delete-wallet" element={<DeleteWallet />} />

                        <Route path="/accounts/:accountId" element={<AccountDetails />} />
                        <Route path="/accounts" element={<Accounts />} />
                        <Route path="/accounts/add" element={<AddAccount />} />
                        <Route path="/accounts/switch" element={<SwitchAccount />} />
                        <Route path="/accounts/import" element={<ImportAccounts />} />

                        <Route path="/sign-request/:signRequestId" element={<SignRequest />} />
                        <Route path="/add-chain-by-user" element={<AddChainByUser />} />
                    </Route>
                    <Route path="/options" element={<Options />} />
                    <Route path="/welcome" element={<Welcome />} />
                    <Route path="/networks" element={<Networks />} />
                    <Route path="/create-password" element={<CreatePassword />} />
                    <Route path="/unlock-keyring" element={<UnlockKeyring />} />
                </Routes>
            </Suspense>
        </KeyringProvider>
    </HashRouter>
)
