import React from 'react';

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import ReactDOM from 'react-dom/client';
import { I18nextProvider } from 'react-i18next';

import './i18n';
import './styles/antd.scss';
import './styles/global.scss';
import './styles/tailwind.css';

import App from './App';
import i18n from './i18n';

// 配置 dayjs
dayjs.extend(utc);

// 更新 URL 中的语言参数
const updateUrlLang = (language: string) => {
    const url = new URL(window.location.href);
    const hash = url.hash;

    // 移除 URL 中的 lang 参数
    url.searchParams.delete('lang');

    if (hash) {
        // Hash 路由模式
        const [path, search] = hash.split('?');
        const params = new URLSearchParams(search || '');
        params.set('lang', language);
        url.hash = `${path}?${params.toString()}`;
    } else {
        // 普通路由模式
        url.searchParams.set('lang', language);
    }

    window.history.replaceState({}, '', url.toString());
};

// 设置文档方向
const setDocumentDirection = (language: string) => {
    const direction = i18n.t('DIR') === 'rtl' ? 'rtl' : 'ltr';
    document.documentElement.dir = direction;
    document.documentElement.lang = language;
    // 更新 URL 中的语言参数
    updateUrlLang(language);
};

// 监听语言变化
i18n.on('languageChanged', setDocumentDirection);

// 初始化时只设置文档方向，不更新 URL
const initDocumentDirection = (language: string) => {
    const direction = i18n.t('DIR') === 'rtl' ? 'rtl' : 'ltr';
    document.documentElement.dir = direction;
    document.documentElement.lang = language;
};

// 初始化时设置方向
initDocumentDirection(i18n.language);

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <I18nextProvider i18n={i18n}>
            <App />
        </I18nextProvider>
    </React.StrictMode>
);