import { useEmotionCss } from '@ant-design/use-emotion-css';
import { Avatar, Space, Spin } from 'antd';
import React from 'react';
import { useModel } from 'umi';
import ThemeSwitch from '../ThemeSwitch';
import AvatarDropdown, { GlobalHeaderRightProps } from './AvatarDropdown';

export type SiderTheme = 'light' | 'dark';

const RightContent: React.FC<GlobalHeaderRightProps> = (props) => {
    const { initialState } = useModel('@@initialState');
    const userClassName = useEmotionCss(() => {
        return {
            display: 'flex',
            alignItems: 'center',
            paddingLeft: 0,
        };
    });
    const ucn = `ant-pro-global-header-header-actions-avatar ${userClassName}`;
    if (!initialState || !initialState.settings) {
        return <Spin />;
    }
    const { currentUser } = initialState;
    return (
        <Space align="center">
            <div className={ucn}>
                <AvatarDropdown menu={props.menu}>
                    <div>
                        <Avatar src={currentUser?.avatar || '/images/avatar-default.svg'} />
                        <span style={{ paddingLeft: 4 }}>{currentUser?.name}</span>
                    </div>
                </AvatarDropdown>
            </div>
            <ThemeSwitch />
        </Space>
    );
};
export default RightContent;
