import * as React from 'react';
import { Layout, MenuProps, Modal, Dropdown, Select, Button, Tooltip } from 'antd';
import { CaretDownOutlined, LogoutOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import logoSrc from '@/assets/public/logo.png';
import router from '@/router';
import LocalStorage from '@/LocalStorage';

const { Header: AntdHeader } = Layout;

interface Props {
    userName: string,
    onClickLogout: () => Promise<any>,
    onSelectChange: (value: number) => void; // 新增回调函数
    currentMenuType: number;
};

const Header: React.FC<Props> = (props: Props) => {
    const {
        userName,
        onClickLogout,
        onSelectChange,
        currentMenuType
    } = props;

    const navigate = useNavigate();
    const location = useLocation();
    const isHelp = location.pathname.startsWith('/help');

    // const items: MenuProps['items'] = [
    //     // 移除退出登录选项，现在使用独立的登出按钮
    // ];

    const fruits = [
        { id: 1, name: 'DeepSeek' },
        { id: 2, name: '智谱' },
    ];
    const [open, setOpen] = React.useState(false); // 控制下拉框展开状态
    const onDropdownVisibleChange = (visible: boolean) => {
        setOpen(visible);
    };

    const handleLogoClick = () => {
        if (isHelp) {
            // 在帮助文档页面，点击跳转到首页
            navigate('/deepseek/questionAnswer');
        }
    };

    return (
        <AntdHeader className='header'>
            <div className='header-logo'>
                <img className='header-logo-picture' src={logoSrc} />
                <div 
                    className='header-logo-text'
                    onClick={handleLogoClick}
                    style={isHelp ? { cursor: 'pointer', userSelect: 'none' } : {}}
                >
                    建科•小智应用广场
                </div>
                {/* <Select 
                    className='header-platform-selector'
                    open={open}
                    value={currentMenuType}
                    onChange={onSelectChange}
                    placeholder="请选择"
                    onDropdownVisibleChange={onDropdownVisibleChange}
                    onClick={(e) => e.stopPropagation()} // 阻止事件冒泡
                >
                    {fruits.map(fruit => (
                        <Select.Option key={fruit.id} value={fruit.id}>
                            {fruit.name}
                        </Select.Option>
                    ))}
                </Select> */}
            </div>
            <div className='header-user-section'>
                <div className='header-operation'>
                    <div className='header-operation-picture'>
                        {userName.slice(0, 1)}
                    </div>
                    <div className='header-operation-name'>
                        {userName}
                    </div>
                        {/* <CaretDownOutlined className='header-operation-down' /> */}
                </div>
                <Tooltip title="退出登录" placement="bottom">
                    <Button
                        type="text"
                        icon={<LogoutOutlined />}
                        className='header-logout-btn'
                        onClick={() => {
                            Modal.confirm({
                                title: '提示',
                                content: '确定退出平台吗？',
                                async onOk() {
                                    await onClickLogout();
                                }
                            });
                        }}
                    />
                </Tooltip>
            </div>
        </AntdHeader>
    );
};

export default Header;