import * as React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Breadcrumb as AntdBreadcrumb, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { State } from '../types';
import router from '@/router';

interface Props {
    routerMatchList: State['routerMatchList'],
    onKnowledgeLibCreate?: () => void; // 知识库创建回调
};

const Breadcrumb: React.FC<Props> = (props: Props) => {
    const { routerMatchList, onKnowledgeLibCreate } = props;
    const location = useLocation();

    // 根据当前路由生成动态按钮
    const getDynamicButton = () => {
        const path = location.pathname;
        
        // 问答应用列表页面
        if (path === '/deepseek/questionAnswer' || path === '/zhipu/questionAnswer') {
            return (
                <Button 
                    type="primary" 
                    icon={<PlusOutlined />}
                    onClick={() => {
                        const basePath = path.startsWith('/deepseek') ? '/deepseek' : '/zhipu';
                        router.navigate(`${basePath}/questionAnswer/create`);
                    }}
                >
                    创建问答应用
                </Button>
            );
        }
        
        // 知识库列表页面
        if (path === '/deepseek/knowledgeLib' || path === '/zhipu/knowledgeLib') {
            return (
                <Button 
                    type="primary" 
                    icon={<PlusOutlined />}
                    onClick={() => {
                        // 触发自定义事件，让页面组件监听并处理
                        const event = new CustomEvent('knowledgeLibCreate', {
                            detail: { platform: path.startsWith('/deepseek') ? 'deepseek' : 'zhipu' }
                        });
                        window.dispatchEvent(event);
                    }}
                >
                    创建知识库
                </Button>
            );
        }
        
        // 其他页面不显示按钮
        return null;
    };

    const items = routerMatchList.map((item, index) => {
        const color = (index === 0 || index < routerMatchList.length - 1) ? '#595959' : '#1a1a1a';
        return {
            key: index,
            title: <Link
                style={{ color: color }}
                to={item.path}>
                {item.breadcrumbName}
            </Link>,
        }
    });

    return (
        <div className='breadcrumb-container'>
            <AntdBreadcrumb className='breadcrumb' items={items} />
            <div className='breadcrumb-actions'>
                {getDynamicButton()}
            </div>
        </div>
    );
};

export default Breadcrumb;