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 { App as ConfigApp } from './pages/config';
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 'dayjs/locale/zh-cn';
import 'dayjs/locale/en';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import ConfigProvider from 'antd/es/config-provider';
import { useTranslation } from 'react-i18next';
import { useEffect, useState } from 'react';

const AntProvider = ({ children }: { children: React.ReactNode }) => {
  const theme = useTheme();
  const primaryColor = theme.palette.primary.main;
  const secondaryColor = theme.palette.secondary.main;
  const { i18n } = useTranslation();
  const [locale, setLocale] = useState(zhCN);
  useEffect(() => {
    if (i18n.language === 'en') {
      setLocale(enUS);
    } else {
      setLocale(zhCN);
    }
  }, [i18n.language]);
  return (
    <ConfigProvider
      locale={locale}
      theme={{
        token: {
          colorPrimary: primaryColor,
          colorPrimaryHover: secondaryColor,
          colorPrimaryActive: primaryColor,
          borderRadius: 4,
          colorBorder: primaryColor,
          colorIcon: primaryColor,
          colorIconHover: secondaryColor,
          colorInfoHover: secondaryColor,
          zIndexPopupBase: 2000,
        },
        components: {
          DatePicker: {
            colorPrimary: primaryColor,
            colorPrimaryHover: secondaryColor,
            colorPrimaryActive: primaryColor,
          },
          Tooltip: {
            zIndexPopupBase: 2000,
          },
        },
      }}>
      {children}
    </ConfigProvider>
  );
};
export const App = () => {
  return (
    <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='/user1/*' element={<UserApp />} />
              <Route path='/org/*' element={<OrgApp />} />
              <Route path='/config/*' element={<ConfigApp />} />
              <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>
  );
};