import { ConfigProvider } from 'antd';
import {
  ErrorBoundary,
  LoadingPage,
  PAGE_TITLE_MAPPING,
  PrevLocationProvider,
  themeConfig,
  TRACKING_SCREEN_MAPPING,
} from '@tempi/editor-site';

import React, { Suspense } from 'react';
import { Toaster } from 'react-hot-toast';
import { BrowserRouter } from 'react-router-dom';

export const App: React.FC = () => {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#7367f0',
          colorTextSecondary: '#82868b',
          colorBorder: '#d8d6de',
        },
      }}
    >
      <ErrorBoundary>
        <Suspense fallback={<LoadingPage />}>
          <BrowserRouter>
            <PrevLocationProvider
              trackingScreenMapping={TRACKING_SCREEN_MAPPING}
              pageTitleMapping={PAGE_TITLE_MAPPING}
            >
              {/* TODO: Apply new structure for following editors */}
              {/* <Routes>
                <Route path="/" element={<PrivateRouteWrapper />}>
                  <Route
                    path={NEW_BLOCK_BUILDER}
                    element={
                      <TrackerWrapper path={NEW_BLOCK_BUILDER}>
                        <BlockEditorProvider>
                          <BlockEditor />
                        </BlockEditorProvider>
                      </TrackerWrapper>
                    }
                  />
                  <Route
                    path={WEB_PAGE_TEMPLATE_BUILDER}
                    element={
                      <TrackerWrapper path={WEB_PAGE_TEMPLATE_BUILDER}>
                        <WebPageTemplateEditorProvider>
                          <WebPageTemplateEditor />
                        </WebPageTemplateEditorProvider>
                      </TrackerWrapper>
                    }
                  />
                  <Route
                    path={WEBSITE_TEMPLATE_BUILDER}
                    element={
                      <TrackerWrapper path={WEBSITE_TEMPLATE_BUILDER}>
                        <WebsiteTemplateEditorProvider>
                          <WebsiteTemplateEditor />
                        </WebsiteTemplateEditorProvider>
                      </TrackerWrapper>
                    }
                  />
                  <Route
                    path={POPUP_BUILDER}
                    element={
                      <TrackerWrapper path={POPUP_BUILDER}>
                        <PopupEditorProvider>
                          <PopupEditor />
                        </PopupEditorProvider>
                      </TrackerWrapper>
                    }
                  />
                  <Route
                    path={LANDING_TEMPLATE}
                    element={
                      <TrackerWrapper path={LANDING_TEMPLATE}>
                        <LandingTemplateEditorProvider>
                          <LandingTemplateEditor />
                        </LandingTemplateEditorProvider>
                      </TrackerWrapper>
                    }
                  />
                </Route>
                <Route path="*" element={<NotFound />} />
              </Routes> */}
            </PrevLocationProvider>
            <Toaster
              position={themeConfig.layout.toastPosition as any}
              toastOptions={{ className: 'react-hot-toast' }}
            />
          </BrowserRouter>
        </Suspense>
      </ErrorBoundary>
    </ConfigProvider>
  );
};