import { StyleProvider } from '@ant-design/cssinjs';
import { ConfigProvider, App as AntdApp } from 'antd';
// import 'dayjs/locale/zh-cn';

import { FC } from 'react';

import $styles from './app.module.css';
import { Locale } from './components/demo/context';
import { useLocaleData } from './components/i18n/hooks';
import Setting from './components/setting';
import Theme from './components/theme';
import { useAntdAlgorithm } from './components/theme/hooks';

const Wrapper: FC = () => {
    const locale = useLocaleData();
    // const locale = useLocale();
    // const antdLocaleData = useMemo(() => {
    //     if (!Object.keys(localeData).find((v) => v === locale.name)) {
    //         return localeData[0];
    //     }
    //     return localeData[locale.name];
    // }, [locale.name]);
    // const themeState = useTheme();
    // const algorithm = useMemo(() => {
    //     const result = [themeState.compact ? theme.compactAlgorithm : theme.defaultAlgorithm];
    //     if (themeState.mode === 'dark') result.push(theme.darkAlgorithm);
    //     return result;
    // }, [themeState]);
    const algorithm = useAntdAlgorithm();
    return (
        <ConfigProvider
            locale={locale.antd}
            theme={{
                algorithm,
                token: {},
            }}
        >
            <StyleProvider hashPriority="high">
                <AntdApp>
                    <div className={$styles.app}>
                        {/* <StateDemo />
                        <EffectDemo />
                        <RefDemo />
                        <MemoDemo />
                        <CallbackDemo />
                        <ContextDemo />
                        <ReducerDemo />
                        <CustomDemo /> */}
                        <Setting />
                    </div>
                </AntdApp>
            </StyleProvider>
        </ConfigProvider>
    );
};
const App: FC = () => (
    <Locale>
        <Theme>
            <Wrapper />
        </Theme>
    </Locale>
);
export default App;
