import {BookOutlined, DeploymentUnitOutlined, EditOutlined, InfoCircleOutlined} from '@ant-design/icons'
import {type AppItemProps, ProLayout} from '@ant-design/pro-components'
import {ConfigProvider} from 'antd'
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: '/bookshelf',
          name: '书架',
          icon: <BookOutlined/>,
        },
        {
          path: '/creator',
          name: '创作',
          icon: <EditOutlined/>,
        },
        {
          path: '/test',
          name: '测试',
          icon: <DeploymentUnitOutlined/>,
        },
      ],
    },
  ],
}

const Root: React.FC = () => {
  const location = useLocation()
  const currentYear = useMemo(() => new Date().getFullYear(), [])
  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: 'group'}}
        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="copyright" 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