import {
  DeploymentUnitOutlined,
  InfoCircleOutlined,
  MoneyCollectOutlined,
  UnorderedListOutlined,
} from '@ant-design/icons'
import {type AppItemProps, ProLayout} from '@ant-design/pro-components'
import {ConfigProvider} from 'antd'
import {dateFormat} from 'licia'
import React, {useMemo} from 'react'
import {NavLink, Outlet, useLocation} from 'react-router'
import styled from 'styled-components'

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 apps: AppItemProps[] = []

const menus = {
  routes: [
    {
      path: '/',
      name: '概览',
      icon: <InfoCircleOutlined/>,
      routes: [
        {
          path: '/overview',
          name: '概览',
          icon: <InfoCircleOutlined/>,
        },
        {
          path: '/stock',
          name: '股票',
          icon: <MoneyCollectOutlined/>,
        }, {
          path: '/task',
          name: '任务',
          icon: <UnorderedListOutlined/>,
          routes: [
            {
              path: '/task/list',
              name: '任务列表',
            },
            {
              path: '/task/template/list',
              name: '任务模板',
            },
            {
              path: '/task/schedule/list',
              name: '定时任务',
            },
          ],
        },
        {
          path: '/test',
          name: '测试',
          icon: <DeploymentUnitOutlined/>,
        },
      ],
    },
  ],
}

const Root: React.FC = () => {
  const location = useLocation()
  const currentYear = useMemo(() => dateFormat(new Date(), 'yyyy'), [])
  return (
    <ProLayoutDiv>
      <ProLayout
        collapsed={false}
        collapsedButtonRender={() => <></>}
        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="金钱豹"
        route={menus}
        location={{pathname: location.pathname}}
        menu={{type: 'sub'}}
        menuItemRender={(item, defaultDom) =>
          <NavLink to={item.path || '/'}>{defaultDom}</NavLink>
        }
        fixSiderbar={true}
        layout="side"
        splitMenus={true}
        style={{minHeight: '100vh'}}
        contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
        menuFooterRender={props => {
          return (
            <div className="text-xs 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 Root