import {createBrowserRouter, RouterProvider,} from "react-router-dom";
import {Suspense, useEffect,} from "react";
import {ConfigProvider, App} from "antd";
import zhCN from 'antd/locale/zh_CN';
// for date-picker i18n
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
import ErrorBoundary from "./error.tsx";
import Loader from "@/components/loader.tsx";
import routes from "@/routes/routes.tsx";
import {DocumentTitle} from "@/components/document.tsx";
import useConfig from "@/hooks/useConfig.ts";
import {useTranslation} from "react-i18next";
import useGlobalConfig from "@/hooks/useGlobalConfig.ts";


const router = createBrowserRouter([
	...routes,
	{path: '*', element: <ErrorBoundary/>}
], {
	basename: import.meta.env.VITE_APP_BASE_NAME,
	future: {
		v7_fetcherPersist: true,
		v7_relativeSplatPath: true,
		v7_normalizeFormMethod: true,
		v7_skipActionErrorRevalidation: true,
		v7_partialHydration: true,
	}
})

const {globalConfig} = useGlobalConfig();
// future={{v7_startTransition: true,v7_relativeSplatPath: true}}
const AppRouter = () => {
	const {t,i18n} = useTranslation();
	
	useEffect(() => {
		if (i18n && i18n.language == 'zh-CN') {
			dayjs.locale('zh-cn');
		}else{
			dayjs.locale('en')
		}
		globalConfig.i18n = i18n.language
		// i18n.changeLanguage(i18n).then(()=>console.log('change lang to ',i18n))
	}, [i18n])

	return (<ConfigProvider
		locale={i18n == 'zh-CN' ? zhCN : undefined}
		theme={{
			token: {
				borderRadius: 4,
			},
		}}
	>
		<DocumentTitle title={t('AppTitle')}/>
		<App>
			<Suspense fallback={<Loader/>}>
				<RouterProvider future={{v7_startTransition: true}} router={router}/>
			</Suspense>
		</App>
	</ConfigProvider>)
}

export default AppRouter;