import './global.css';

import Center from '@arcblock/ux/lib/Center';
import withTracker from '@arcblock/ux/lib/withTracker';
import { ConfigProvider } from '@arcblock/ux/lib/Config';
import { ToastProvider } from '@arcblock/ux/lib/Toast';
import { CircularProgress } from '@mui/material';
import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { PaymentThemeProvider, usePreventWheel } from '@blocklet/payment-react';
import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import { joinURL } from 'ufo';

import ErrorFallback from './components/error-fallback';
import UserLayout from './components/layout/user';
import { TransitionProvider } from './components/progress-bar';
import { SessionProvider } from './contexts/session';
import { translations } from './locales';

const HomePage = React.lazy(() => import('./pages/home'));
const CheckoutPage = React.lazy(() => import('./pages/checkout'));
const AdminPage = React.lazy(() => import('./pages/admin'));
const CustomerHome = React.lazy(() => import('./pages/customer/index'));
const CustomerInvoiceDetail = React.lazy(() => import('./pages/customer/invoice/detail'));
const CustomerInvoicePastDue = React.lazy(() => import('./pages/customer/invoice/past-due'));
const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/subscription/detail'));
const CustomerSubscriptionEmbed = React.lazy(() => import('./pages/customer/subscription/embed'));
const CustomerSubscriptionChangePlan = React.lazy(() => import('./pages/customer/subscription/change-plan'));
const CustomerSubscriptionChangePayment = React.lazy(() => import('./pages/customer/subscription/change-payment'));
const CustomerCreditGrantDetail = React.lazy(() => import('./pages/customer/credit-grant/detail'));
const CustomerCreditTransactionDetail = React.lazy(() => import('./pages/customer/credit-transaction/detail'));
const CustomerRecharge = React.lazy(() => import('./pages/customer/recharge/subscription'));
const CustomerPayoutDetail = React.lazy(() => import('./pages/customer/payout/detail'));
const IntegrationsPage = React.lazy(() => import('./pages/integrations'));
const CustomerBalanceRecharge = React.lazy(() => import('./pages/customer/recharge/account'));

// const theme = createTheme({
//   typography: {
//     fontSize: 14,
//     allVariants: {
//       textTransform: 'none',
//     },
//   },
// });

function App() {
  return (
    <TransitionProvider>
      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
        <Suspense
          fallback={
            <Center>
              <CircularProgress />
            </Center>
          }>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/checkout/:action/:id" element={<CheckoutPage />} />
            <Route key="admin-index" path="/admin" element={<AdminPage />} />,
            <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
            <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
            <Route key="admin-detail" path="/admin/:group/:page/:id" element={<AdminPage />} />,
            <Route key="admin-nested" path="/admin/:group/:page/:subpage/:id" element={<AdminPage />} />,
            <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
            <Route key="integrations-index" path="/integrations" element={<IntegrationsPage />} />
            <Route key="integrations-tabs" path="/integrations/:group" element={<IntegrationsPage />} />
            <Route key="integrations-sub" path="/integrations/:group/:page" element={<IntegrationsPage />} />
            <Route key="integrations-fallback" path="/integrations/*" element={<IntegrationsPage />} />
            <Route
              key="customer-home"
              path="/customer"
              element={
                <UserLayout>
                  <CustomerHome />
                </UserLayout>
              }
            />
            <Route
              key="customer-subscription"
              path="/customer/subscription/:id"
              element={
                <UserLayout>
                  <CustomerSubscriptionDetail />
                </UserLayout>
              }
            />
            <Route
              key="customer-subscription-change-plan"
              path="/customer/subscription/:id/change-plan"
              element={
                <UserLayout>
                  <CustomerSubscriptionChangePlan />
                </UserLayout>
              }
            />
            <Route
              key="customer-subscription-change-payment"
              path="/customer/subscription/:id/change-payment"
              element={
                <UserLayout>
                  <CustomerSubscriptionChangePayment />
                </UserLayout>
              }
            />
            <Route
              key="customer-recharge"
              path="/customer/subscription/:id/recharge"
              element={
                <UserLayout>
                  <CustomerRecharge />
                </UserLayout>
              }
            />
            <Route
              key="customer-balance-recharge"
              path="/customer/recharge/:currencyId"
              element={
                <UserLayout>
                  <CustomerBalanceRecharge />
                </UserLayout>
              }
            />
            <Route key="customer-embed" path="/customer/embed/subscription" element={<CustomerSubscriptionEmbed />} />
            <Route
              key="subscription-embed"
              path="/embed/customer/subscription"
              element={<CustomerSubscriptionEmbed />}
            />
            <Route
              key="customer-due"
              path="/customer/invoice/past-due"
              element={
                <UserLayout>
                  <CustomerInvoicePastDue />
                </UserLayout>
              }
            />
            <Route
              key="customer-invoice"
              path="/customer/invoice/:id"
              element={
                <UserLayout>
                  <CustomerInvoiceDetail />
                </UserLayout>
              }
            />
            <Route
              key="customer-payout"
              path="/customer/payout/:id"
              element={
                <UserLayout>
                  <CustomerPayoutDetail />
                </UserLayout>
              }
            />
            <Route
              key="customer-credit-grant"
              path="/customer/credit-grant/:id"
              element={
                <UserLayout>
                  <CustomerCreditGrantDetail />
                </UserLayout>
              }
            />
            <Route
              key="customer-credit-transaction"
              path="/customer/credit-transaction/:id"
              element={
                <UserLayout>
                  <CustomerCreditTransactionDetail />
                </UserLayout>
              }
            />
            <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
            <Route path="*" element={<Navigate to="/" />} />
          </Routes>
        </Suspense>
      </ErrorBoundary>
    </TransitionProvider>
  );
}

const AppWithTracker = withTracker(App);

export default function WrappedApp() {
  // While the blocklet is deploy to a sub path, this will be work properly.
  const prefix = window?.blocklet?.prefix || '/';

  usePreventWheel();

  return (
    <ConfigProvider translations={translations} fallbackLocale="en">
      <ToastProvider>
        <PaymentThemeProvider>
          <SessionProvider
            serviceHost={prefix}
            protectedRoutes={['/admin/*', '/customer/*', '/integrations/*'].map((item) => joinURL(prefix, item))}>
            <Router basename={prefix}>
              <AppWithTracker />
            </Router>
          </SessionProvider>
        </PaymentThemeProvider>
      </ToastProvider>
    </ConfigProvider>
  );
}
