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} from 'react';
import {ConfigProvider} from 'antd';
import {ThemeConfig} from 'antd/es/config-provider/context';
import zhCN from 'antd/es/locale/zh_CN';

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

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}>
        <BrowserRouter>
          <RootRoutes />
        </BrowserRouter>
      </ConfigProvider>
      <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
    </QueryClientProvider>
  </StrictMode>,
);