import { Suspense } from 'react';
import { RecoilRoot } from 'recoil';
import { QueryClientProvider } from 'react-query';
import { ReactFlowProvider } from 'react-flow-renderer';
import { ConfigProvider, message } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import Loading from '@/components/Loading';
import { queryClient } from './plugins/ReactQuery';
import RecoilExternalStatePortal from './RecoilExternalStatePortal';
import Router from './Router';
import AuthProvider from './components/AuthProvider';

message.config({ maxCount: 3 });

export default function App() {
  return (
    <RecoilRoot>
      <RecoilExternalStatePortal />
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
            <ReactFlowProvider>
              <DndProvider backend={HTML5Backend}>
                <Suspense fallback={<Loading />}>
                  <Router />
                </Suspense>
              </DndProvider>
            </ReactFlowProvider>
          </ConfigProvider>
        </AuthProvider>
      </QueryClientProvider>
    </RecoilRoot>
  );
}