import {type AppItemProps, ProLayout} from '@ant-design/pro-components'
import {ConfigProvider} from 'antd'
import {dateFormat} from 'licia'
import React, {useMemo, useState} from 'react'
import {Outlet, useLocation, useNavigate} from 'react-router'
import styled from 'styled-components'
import {menus} from '../route.tsx'

const ProLayoutDiv = styled.div`
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;

    .ant-menu-sub > .ant-menu-item {
        //padding-left: 28px !important;
    }
`

const defaultAppIcon =
  <img
    src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURUdwTBR20EyHx1iq5EWJ1hNyy0mR1EhzwnbB/8P5/Fx/vVuj5zyO4lCY102P0L3u/3K88dz4/8v1/0fW/jLh/013ujN4wBliuEuEy0FrqT13wFmCvkaH0GSLyBVVqe38/0il4FKu7crr/eL3/7Ls/zd3t1WN1TZcnTloojx6whpYpTdfoDVwtVeS1WeOyiNhsTFyuy50wHCPxDFgqLjK5G2Ow2Gy5ylpvB9uxA5x03W/71Wh4E2U2tr2/i6C3G7J+Gex7KTI8eb9/cbz/yC+/srl++P7/Znf+MPv/cn3/rz6/dL8/2fe/8v+/s/6/knN87f5/jx5uRZtwjRppU6I1liM2Bhcrmyl2kZ5uA9vzjd0wj95yjVstqze9hiD2zOH1kqv7Wqv5K7S7LLn/YfT+sfp/bPf+4jb/YbX+735/SjQ/T7J+VjV9rTs+0ns/6Dk/mPJ7eD9/b/8/Q9YxA5Zxw5Zwg5dwg5byhdn0kSO2xFezg5gwg1XwRBjwkqW4EeT3kuY20mV2BBVtg5avxFoxQ9Yu0+g3xJYslWi5h2q9SKA4AtTwAxjzUGN2UiN0VOm4yKj8NX7/0WQ3RFtyUaR1h95zSOc706J0Bt34VCi5yqw9F6s6SOI5Bx02h2M6Rh13SCX7k2c3E6a4lCd5EeQ2iVtyCJ54BVt3ROV8x+0+jS9+hGq+Ra0/WK37sPy/iOR6R1w2A5p0y9nrjJ/1EaO1yV1yDt+zBaJ4hF83FuJyg5nyhei9hJ96BN35ByV5ymq8S151muu5UCr6hzE/xS+/47h/3/r/xyG5SKV6yJ43BlswBJivA5z2A9duw5s1C590CZXpDVvuhec9BGM7xJQrxKE61yo4DOF4DeZ64jG8bbp/h/Q/j2F0xpr1xliyROA4CRst1mc10d8whNQqDqb3Sig5qrh/qLW9iZ/5UeY5pDU9UWf6J7O9oju/mDV/aXp/orj/6P7/4z3/2Pr/iLa/kaDxnuw57rf9ZfW+2Sd5G3X/7LW9zyR51TI+Dao7Zno//A+0MwAAADpdFJOUwD7Lv/+/v4CAQIK/v7+/P7+b/7+/iKh/f5LjBv8z/4d/v5cNf6A5piF/Pts9PST/tP+Qd0Oc/72Pf5B/Pv0/vv7zqD6/4qU+5JjlCv7ff79/lz628SK/pmm+/5cnh/+/vPht/r+pPKX44z7+/z7/P7+wNL////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+///////////////////////+1awirQAAA+BJREFUOMtjYCAXcMIAAVW4OKjKgJjDW8nXyytT0NOKCyjAgUudt29RwMdPb48dO/b2aEa6MkQvpjrlQqCqz3ki/j4+2VnCv44+S5XHVAm0xHPixHXuOSIiX4TfHeo87OJin/IjTYmBgwNdndvEibkF/sIiX26/+7f6yJo1K/fPtL/53BXDPKeJQkLvPx87Knz79qzOI2tWr959acFaAYE3rii2cwDVOQutU8k/+uHv4cNrQMpWrFgxTXHtWoc3gkgqORkEJzqvW3fr/f8Paye4rFzZufvSisuXr95QVJw9W+C3MlwlB4O87Tp+fn6VV2sVgOo6wequ7tkz4zWP3QHrm45IBroJJd/if37w0CygaZ0Tpi1YMO/qnr17b7yeMePFAZufSlAjQQbeyle5qbBq1apZIGUn1s87DlS3/DrPsj8vr/McdES48Lv7q4NPVq3avx+sbP2cOV0zZsxfftfuZcdsbm6Bb1YM7BATk64pPHk6C6hqGljVnK6uZSfnzl2+bObMmR3csx0OhkIUMpgkHgKatW/fvO3HjwMVdXWdPHly7oYNd3mA6jo6uLm5Q0ABDcSxCU/37du+/f79HfPnz507dwNQ0Ya7dyuudyzu6Fi8eNGiOjUukEp2BqZDcXE7dpw5c+bcuY0bK+CgbtEioLK6+kmVLKIQhRZP4iwtgWp6gKCqpwoCyivqQACorLeXhQnkSKDC83a7dgEVlfeUw0BJScm9SfVAAFTHwjIdqpBpafyuspISIEICxSWV9ZMmLQGr0wVbzcEgbb518+YDFcWlxUAAUgMGNXfqKisrl1QCFaqZgL3NwGkgzsbb2LC5u7sYAUprWu/UL2HZto1FZrosJGbYGWIMbdjYpjRuvtddU1MDVAMB3U3bljZdubJNZqceJMDZGSQv8vX1TZnS2HCguwaqqrS5ubm1CQiuRE3faQSNGQYu469glVMalnZ315SBAUghUGX7Y/3psrD0yM6gvQmoEGh5Y0Pv+Xs1pdUQlUCF7e2PzXeawgwEGQm0nI2tsaFhYdvC3qVl1WClZ1vb2+XkHskisgLQlRc0IeoWtrUxn2+urT5dXVt99ixQ4UWEC8EqNS5o8jaClLX191bXQsDps+1hWo+QLAYnIfULMrxAdf39s6dWt4BB7enT4lqb9Bg40DK2+iZea2tmZub+qbsmA0HLqZZT4vqbpBgYMIoKbZ2H166Z1U9mhYKgUw+CJdHVgd0pGvHwmllvJCMYsJ56oKPBheI+hEoGpnDdrVungsBWQwNVaQas6oCWAIWlo6WkxMTEVAOZQFo5cJW57Mgm4FYGMRUGyK0tAGzv0vrmaa6xAAAAAElFTkSuQmCC'}
    alt=""
  />
const apps: AppItemProps[] = [
  {
    icon: 'http://132.121.223.12:7001/static/webssh/favicon2.ico',
    title: '运营数据汇聚平台',
    desc: '企业全融合数字化平台',
    url: 'http://132.121.223.12:7001/index.html/#/login',
  },
  {
    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/',
  },
  {
    icon: defaultAppIcon,
    title: '汇聚平台辅助工具',
    desc: '辅助工具，用于帮助运营工作，不断改进中',
    url: 'http://132.121.204.100:38080/tools/#/',
  },
  {
    icon: defaultAppIcon,
    title: 'B12-Yarn',
    desc: 'B12集群Yarn页面',
    url: 'http://132.126.207.125:8088/cluster/scheduler',
  },
]

const App: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const [collapsed, setCollapsed] = useState<boolean>(false)
  const currentYear = useMemo(() => dateFormat(new Date(), 'yyyy'), [])
  return (
    <ProLayoutDiv>
      <ProLayout
        collapsed={collapsed}
        onCollapse={setCollapsed}
        siderWidth={180}
        token={{
          colorTextAppListIcon: '#dfdfdf',
          colorTextAppListIconHover: '#ffffff',
          header: {
            colorBgHeader: '#292f33',
            colorHeaderTitle: '#ffffff',
            colorTextMenu: '#dfdfdf',
            colorTextMenuSecondary: '#dfdfdf',
            colorTextMenuSelected: '#ffffff',
            colorTextMenuActive: '#ffffff',
            colorBgMenuItemSelected: '#22272b',
            colorTextRightActionsItem: '#dfdfdf',
          },
          pageContainer: {
            paddingBlockPageContainerContent: 0,
            paddingInlinePageContainerContent: 0,
            marginBlockPageContainerContent: 0,
            marginInlinePageContainerContent: 0,
          },
        }}
        appList={apps}
        breakpoint={false}
        disableMobile={true}
        logo={<img src="icon.png" alt="logo"/>}
        title="Hudi 服务总台"
        route={menus}
        location={{pathname: location.pathname}}
        menu={{type: 'sub'}}
        menuItemRender={(item, defaultDom) => {
          return (
            <div onClick={() => navigate(item.path || '/')}>
              {/*<span className="align-center">{item.icon}</span>*/}
              {/*<span className="ml-2">{item.name}</span>*/}
              {defaultDom}
            </div>
          )
        }}
        fixSiderbar={true}
        layout="mix"
        splitMenus={true}
        style={{minHeight: '100vh'}}
        contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
        menuFooterRender={props => {
          return (
            <div className="text-sm text-center" style={{userSelect: 'none', msUserSelect: 'none'}}>
              {props?.collapsed
                ? undefined
                : <div>© 2023-{currentYear} 汇聚平台</div>}
            </div>
          )
        }}
      >
        <ConfigProvider
          theme={{
            components: {
              Card: {
                bodyPadding: 0,
                bodyPaddingSM: 0,
              },
            },
          }}
        >
          <Outlet/>
        </ConfigProvider>
      </ProLayout>
    </ProLayoutDiv>
  )
}

export default App