import { StyleProvider } from '@ant-design/cssinjs';
import { ConfigProvider, App as AntdApp } from 'antd';
import { FC, useMemo } from 'react';

import $styles from './app.module.css';
import { localeData } from './components/demo/constants';
import ContextDemo from './components/demo/context';
import CustomDemo from './components/demo/custom';
import { useLocale } from './components/demo/hooks';
import { useAntdAlgorithm } from './components/theme/hooks';

export const Wrapper: FC = () => {
    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={antdLocaleData}
            theme={{
                algorithm,
                token: {},
            }}
        >
            <StyleProvider hashPriority="high">
                <AntdApp>
                    <div className={$styles.app}>
                        {/* <StateDemo />
            <EffectDemo />
            <RefDemo />
            <MemoDemo />
            <CallbackDemo /> */}
                        <ContextDemo />
                        {/* <ReducerDemo /> */}
                        <CustomDemo />
                    </div>
                </AntdApp>
            </StyleProvider>
        </ConfigProvider>
    );
};