import { ThemeMode } from '@/common/cache';
import { setThemeCompact, setThemeMode, ThemeModeType } from '@/layouts/RootLayout/rootLayoutSlice';
import { RootState } from '@/store';
import { CompressOutlined, ExpandOutlined } from '@ant-design/icons';
import { Dropdown, theme } from 'antd';
import { useCallback, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import IconFont from '../IconFont';

const ThemeSwitch = () => {
    const rootLayout = useSelector((state: RootState) => state.rootLayout);
    const dispatch = useDispatch();

    const { token } = theme.useToken();

    const defaultThemeMode = rootLayout?.themeMode ?? 'light';
    let sks: string[] = [defaultThemeMode];
    if (rootLayout.themeCompact) {
        sks.push('compact');
    } else {
        sks.push('expand');
    }
    const [selectedKeys, setSelectedKeys] = useState(sks);

    const handleSetThemeMode = useCallback(
        (mode: string) => {
            let rtm = defaultThemeMode;
            let rtc = rootLayout?.themeCompact ? 'compact' : 'expand';

            if (mode === 'compact') {
                dispatch(setThemeCompact(true));
                rtc = mode;
            } else if (mode === 'expand') {
                dispatch(setThemeCompact(false));
                rtc = mode;
            } else {
                dispatch(setThemeMode(mode as ThemeModeType));
                rtm = mode as ThemeModeType;
            }

            setSelectedKeys([rtm, rtc]);
            ThemeMode.set({ themeMode: rtm, themeCompact: rtc === 'compact' });
        },
        [rootLayout],
    );

    return (
        <Dropdown
            menu={{
                items: [
                    { key: 'auto', label: '跟随系统主题', icon: <IconFont icon="theme-auto" /> },
                    { key: 'light', label: '亮色主题', icon: <IconFont icon="theme-light" /> },
                    { key: 'dark', label: '黑暗主题', icon: <IconFont icon="theme-dark" /> },
                    { type: 'divider' },
                    {
                        key: 'compact',
                        label: '紧凑模式（间距及文字较小）',
                        icon: <CompressOutlined />,
                    },
                    {
                        key: 'expand',
                        label: '正常模式（间距及文字较大）',
                        icon: <ExpandOutlined />,
                    },

                ],
                selectedKeys,
                onClick: (e) => {
                    handleSetThemeMode(e.key);
                },
            }}
            trigger={['click']}
        >
            {/* <Button
                shape="circle"
                // size="small"
                style={{ lineHeight: 1 }}
                icon={<IconFont icon={`theme-${defaultThemeMode}`} style={{ fontSize: 13 }} />}
            /> */}
            <IconFont icon={`theme-${defaultThemeMode}`} style={{ fontSize: token.fontSizeLG, lineHeight: 1, }} />
        </Dropdown>
    );
};

export default ThemeSwitch;
