import React from 'react';
import { useLocation, useNavigate, Outlet } from 'react-router-dom';
import { MainLayout as RaMainLayout, MenuItem, BreadcrumbRoute, Breadcrumb as RaBreadcrumb } from '@pwc-ra/components';
import { AppstoreOutlined, HomeOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';

const AppLayout: React.FC = () => {
  // 获取当前路径
  const location = useLocation();
  const navigate = useNavigate();
  const pathname = location.pathname
  const { t } = useTranslation()

  // 菜单项配置
  const menuItems: MenuItem[] = [
    {
      key: '',
      icon: <HomeOutlined />,
      label: t('nav.home')
    },
    {
      key: 'about',
      icon: <InfoCircleOutlined />,
      label: t('nav.about')
    }
  ];

  // 面包屑路由配置
  const getBreadcrumbRoutes = (pathname: string): BreadcrumbRoute[] => {
    const pathSnippets = pathname.split('/').filter(i => i);
    
    // 基础路由 - 首页
    const routes: BreadcrumbRoute[] = [
      { path: '/', title: t('nav.home') }
    ];
    
    // 根据当前路径构建面包屑
    if (pathSnippets.length > 0) {
      const path = `/${pathSnippets[0]}`;
      
      if (path === '/about') {
        routes.push({ path, title: t('nav.about') });
      } else {
        routes.push({ path, title: path.substring(1) });
      }
    }
    
    return routes;
  };
  
  // 构建面包屑组件
  const BreadcrumbComponent = () => {
    const routes = getBreadcrumbRoutes(pathname);
    
    return (
      <RaBreadcrumb 
        routes={routes} 
        onItemClick={(path: string) => {
          navigate(path);
        }}
      />
    );
  };
  
  return (
    <RaMainLayout
      menuItems={menuItems}
      productName={t('common.productName')}
      productIcon={<AppstoreOutlined />}
      breadcrumb={<BreadcrumbComponent />}
    >
      <Outlet />
    </RaMainLayout>
  );
};

export default AppLayout;