import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { App as ContainerApp } from './pages/container';
import { App as MapApp } from './pages/map';
import { App as UserApp } from './pages/user';
import { App as UserAppApp } from './pages/app';
import { App as FileApp } from './pages/file';
import { App as OrgApp } from './pages/org';
import { basename } from './modules/basename';
import { Redirect } from './modules/Redirect';
import { CustomThemeProvider } from '@kevisual/center-components/theme/index.tsx';
import { useTheme } from '@mui/material/styles';
import { ToastContainer } from 'react-toastify';
// import 'react-toastify/dist/ReactToastify.css';

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';
import ConfigProvider from 'antd/es/config-provider';

const AntProvider = ({ children }: { children: React.ReactNode }) => {
  const theme = useTheme();
  const primaryColor = theme.palette.primary.main;
  const secondaryColor = theme.palette.secondary.main;
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: primaryColor,
          colorPrimaryHover: secondaryColor,
          colorPrimaryActive: primaryColor,
          borderRadius: 4,
          colorBorder: primaryColor,
          // colorText: primaryColor,
          colorIcon: primaryColor,
          colorIconHover: secondaryColor,
          colorInfoHover: secondaryColor,
        },
        components: {
          DatePicker: {
            colorPrimary: primaryColor,
            colorPrimaryHover: secondaryColor,
            colorPrimaryActive: primaryColor,
          },
        },
      }}>
      {children}
    </ConfigProvider>
  );
};
export const App = () => {
  return (
    <div>
      <CustomThemeProvider >
        <AntProvider> 
          <div className='w-full h-full'>
            <Router basename={basename}>
              <Routes>
                <Route path='/' element={<Redirect to='/container/' />} />
                <Route path='/container/*' element={<ContainerApp />} />
                <Route path='/map/*' element={<MapApp />} />
                <Route path='/user/*' element={<UserApp />} />
                <Route path='/org/*' element={<OrgApp />} />
                <Route path='/app/*' element={<UserAppApp />} />
                <Route path='/file/*' element={<FileApp />} />

                <Route path='/404' element={<div>404</div>} />
                <Route path='*' element={<div>404</div>} />
              </Routes>
            </Router>
          </div>
        </AntProvider>
        <div id='for-modal'></div>
        <ToastContainer />
      </CustomThemeProvider>
    </div>
  );
};
