import {ProLayout} from '@ant-design/pro-components'
import {ConfigProvider} from 'antd'
import React from 'react'
import {Outlet, useLocation, useNavigate} from 'react-router'
import {menus} from '../route.tsx'

const apps: { title: string, desc: string, url: string, icon?: string }[] = [
  {
    icon: 'http://132.126.207.124:8686/udal-manager/static/favicon.ico',
    title: 'CSV-HUDI处理平台',
    desc: 'Hudi 批量割接、稽核任务管理平台',
    url: 'http://132.126.207.124:8686/udal-manager/',
  },
]

const App: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  return (
    <ProLayout
      token={{
        colorTextAppListIcon: '#dfdfdf',
        colorTextAppListIconHover: '#ffffff',
        header: {
          colorBgHeader: '#292f33',
          colorHeaderTitle: '#ffffff',
          colorTextMenu: '#dfdfdf',
          colorTextMenuSecondary: '#dfdfdf',
          colorTextMenuSelected: '#ffffff',
          colorTextMenuActive: '#ffffff',
          colorBgMenuItemSelected: '#22272b',
          colorTextRightActionsItem: '#dfdfdf',
        },
      }}
      appList={apps}
      disableMobile={true}
      logo={<img src="icon.png" alt="logo"/>}
      title="Hudi 服务总台"
      route={menus}
      location={{pathname: location.pathname}}
      menu={{type: 'sub'}}
      menuItemRender={(item, dom) => {
        return <div onClick={() => navigate(item.path || '/')}>{dom}</div>
      }}
      fixSiderbar={true}
      layout="mix"
      splitMenus={true}
      style={{minHeight: '100vh'}}
      contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
    >
      <ConfigProvider
        theme={{
          components: {
            Card: {
              bodyPadding: 0,
              bodyPaddingSM: 0,
            },
          },
        }}
      >
        <Outlet/>
      </ConfigProvider>
    </ProLayout>
  )
}

export default App