import '@styles/index.css';

import {RootRoutes} from '@routes';
import {createRoot} from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
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';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
      cacheTime: 0,
      retryOnMount: true,
    },
  },
});

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

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

root.render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ConfigProvider theme={themeConfig} locale={zhCN}>
        <Suspense>
          <BrowserRouter>
            <RootRoutes />
          </BrowserRouter>
        </Suspense>
      </ConfigProvider>
      {/* <ReactQueryDevtools initialIsOpen={false} position='bottom-right' /> */}
    </QueryClientProvider>
  </StrictMode>,
);
