import React from 'react';

import { App as AntdApp, ConfigProvider, theme } from 'antd';
import enUS from 'antd/locale/en_US';
import faIR from 'antd/locale/fa_IR';
import zhCN from 'antd/locale/zh_CN';
import { useTranslation } from 'react-i18next';
import { RouterProvider } from 'react-router-dom';

import { AntdAppInstanceCapture } from '@/utils/antdAppInstance';

import { DialogContainer } from './components/Dialog/DialogContainer';
import router from './router';
import models from './utils/model/autoImportModels';

const localeMap = {
    'en-US': enUS,
    'fa-IR': faIR,
    'zh-CN': zhCN,
};

const App: React.FC = () => {
    const { i18n } = useTranslation();
    const locale = localeMap[i18n.language as keyof typeof localeMap] || enUS;

    // 创建所有 model 的 Provider 组件
    const ModelProviders = ({ children }: { children: React.ReactNode }) => {
        return models.reduce((acc, model) => {
            return <model.Provider>{acc}</model.Provider>;
        }, children);
    };

    return (
        <ConfigProvider locale={locale} theme={{ algorithm: theme.darkAlgorithm }}>
            <AntdApp className="h-full">
                <AntdAppInstanceCapture />
                <ModelProviders>
                    <RouterProvider router={router} />
                    <DialogContainer />
                </ModelProviders>
            </AntdApp>
        </ConfigProvider>
    );
};

export default App;
