import '@icon-park/react/styles/index.css';
import 'react-contexify/dist/ReactContexify.css';
import '@styles/index.css';
import {RootRoutes} from '@routes';
import {createRoot} from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
import {QueryClientProvider} from '@tanstack/react-query';
import {StrictMode, Suspense} from 'react';
import {ConfigProvider} from 'antd';
import {ThemeConfig} from 'antd/es/config-provider/context';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/es/locale/zh_CN';
import {Loading} from '@components';
import {QUERY_CLIENT} from '@utils';
import {DndProvider, useDrop} from 'react-dnd';
import {HTML5Backend} from 'react-dnd-html5-backend';

const root = createRoot(document.getElementById('root')!);

const themeConfig: ThemeConfig = {
  components: {
    Menu: {
      colorItemTextSelected: '#00a6ca',
      colorItemBgSelected: '#E1F6FC',
    },
  },
  token: {
    colorPrimary: '#00a6ca',
  },
};

root.render(
  <StrictMode>
    <DndProvider backend={HTML5Backend}>
      <QueryClientProvider client={QUERY_CLIENT}>
        <ConfigProvider theme={themeConfig} locale={zhCN}>
          <Suspense
            fallback={<Loading tip='正在加载' width='100vw' height='100vh' />}
          >
            <BrowserRouter>
              <RootRoutes />
            </BrowserRouter>
          </Suspense>
        </ConfigProvider>
      </QueryClientProvider>
    </DndProvider>
  </StrictMode>,
);
