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

import './header.less'
import {
    BookOutlined,
    TeamOutlined,
    AppstoreOutlined,
} from '@ant-design/icons';
const { Header: AntdHeader } = Layout;

interface Props {
    userName: string,
    onClickLogout: (navigate:any) => Promise<any>,
    onSelectChange: (value: string) => void; // 新增回调函数
    currentMenuType: string; // 当前菜单类型
    ref3?: React.RefObject<any>;
};

const Header: React.FC<Props> = (props: Props) => {
    const navigate = useNavigate(); // 添加useNavigate hook
    const {
      state,
    } = useRouteStore;
    // console.log('state---',state.constantRoutes)
    const {
        ref3,
        userName,
        onClickLogout,
        onSelectChange,
        currentMenuType
    } = props;
    const [appTypeList, setAppTypeList] = React.useState<any>([]);

    // 获取应用类型
    const appTypeApi = {
        fetchAppType: async () => {
            try {
                const res = await apis.fetchTakaiAppTypeList('app_type');
                const list = res.data.map((item: any) => {
                    return {
                        label: item.dictLabel,
                        value: item.dictCode,
                    }
                });
                setAppTypeList(list);
            } catch (error: any) {
                console.error(error);
            }
        },
    };
    const [open, setOpen] = React.useState(false); // 控制下拉框展开状态
    const onDropdownVisibleChange = (visible: boolean) => {
        setOpen(visible);
    };
    const themeKey = 'app-theme-mode';
    const [theme, setTheme] = React.useState<string>(() => {
        try {
            const t = localStorage.getItem(themeKey);
            return t || 'light';
        } catch (e) {
            return 'light';
        }
    });

    // 应用主题到 html[data-theme]
    const applyTheme = (t: string) => {
        try {
            document.documentElement.setAttribute('data-theme', t);
        } catch (e) {
            // ignore
        }
    };

    React.useEffect(() => {
        applyTheme(theme);
    }, []);
    React.useEffect(() => {
        appTypeApi.fetchAppType();
    }, []);
    
    const location = useLocation();
    
    return (
        <AntdHeader className='header'>
            <div className='flex header-gj-text'>
                <div className='header-logo' onClick={() => {
                    if (LocalStorage.getStatusFlag('deepseek:application:list')) {
                        // router.navigate({ pathname: '/deepseek/questionAnswer' });
                    }
                }}>
                    <img className='header-logo-picture' src={logoSrc} />
                    {/* <div className='header-logo-text'>
                        盈科开放平台
                    </div> */}
                </div>
                <div className="ml-0 flex items-center">
                    <Tabs
                        activeKey={currentMenuType}
                        onChange={key => {
                            onSelectChange(key);
                        }}
                        tabBarStyle={{ borderBottom: 'none', marginBottom: 0 }}
                        items={ state.constantRoutes[0]?.path === '/overview' ? [
                            { key: '/appCenter', label: <span ref={ref3} className={location.pathname === '/appCenter' ? 'pb-1 relative tab-underline' : ''}>应用广场
                                {location.pathname === '/appCenter' && <span className="absolute left-0 right-0 bottom-[-10px] h-[2px] bg-blue-600 rounded-full" />}</span> 
                            },
                            { key: '/knowledge/knowledgeLib', label: <span className={currentMenuType === '/knowledge/knowledgeLib' ? 'pb-1 relative tab-underline' : ''}>知识库
                                {currentMenuType === '/knowledge/knowledgeLib' && <span className="absolute left-0 right-0 bottom-[-10px] h-[2px] bg-blue-600 rounded-full" />}</span> },
                            { key: '/overview', label: <span className={currentMenuType === '/overview' ? 'pb-1 relative tab-underline' : ''}>控制台
                                {currentMenuType === '/overview' && <span className="absolute left-0 right-0 bottom-[-10px] h-[2px] bg-blue-600 rounded-full" />}</span> },
                        ]:
                          [  { key: '/appCenter', label: <span ref={ref3} className={location.pathname === '/appCenter' ? 'pb-1 relative tab-underline' : ''}>应用广场
                                {location.pathname === '/appCenter' && <span className="absolute left-0 right-0 bottom-[-10px] h-[2px] bg-blue-600 rounded-full" />}</span> 
                            },
                            { key: '/knowledge/knowledgeLib', label: <span className={currentMenuType === '/knowledge/knowledgeLib' ? 'pb-1 relative tab-underline' : ''}>知识库
                                {currentMenuType === '/knowledge/knowledgeLib' && <span className="absolute left-0 right-0 bottom-[-10px] h-[2px] bg-blue-600 rounded-full" />}</span> },
                        ]}
                    />
                </div>
            </div>

            <div className='header-user-section'>
                <div className='header-operation'>
                    <div className='header-operation-picture'>
                        {userName.slice(0, 1)}
                    </div>
                    {/* <img className='header-logo-picture' src={logoSrc} /> */}
                    <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(navigate);
                                }
                            });
                        }}
                    />
                </Tooltip>
                {/* 切换主题风格 */}
                {/* <div style={{ marginLeft: 8 }}>
                    <Select
                        value={theme}
                        onChange={(val) => {
                            setTheme(val);
                            applyTheme(val);
                            try { localStorage.setItem(themeKey, val); } catch (e) { }
                        }}
                        style={{ width: 120 }}
                        options={[{ label: '浅色', value: 'light' }, { label: '深色', value: 'dark' }]}
                    />
                </div> */}
            </div>
        </AntdHeader>
    );
};

export default Header;