import type { MenuTheme } from 'antd';
import type { FC } from 'react';

import { AlertFilled, AreaChartOutlined, HomeFilled, VideoCameraFilled } from '@ant-design/icons';
import { Button, Layout, Menu, theme, Typography } from 'antd';
import { useState } from 'react';

const { Content, Footer, Header, Sider } = Layout;
const { Title } = Typography;

const App: FC = () => {
  const { token: { colorBgContainer } } = theme.useToken();
  const [menuTheme] = useState<MenuTheme>('light');
  const [count, setCount] = useState(0);

  return (
    <Layout style={{ height: '100%' }}>
      <Header style={{ background: colorBgContainer }}>
        <Title level={2}>网络设备管理平台</Title>
      </Header>
      <Layout>
        <Sider collapsible defaultCollapsed collapsedWidth={64} trigger={null} style={{ background: colorBgContainer }}>
          <Menu
            theme='light'
            mode='inline'
            defaultSelectedKeys={['home']}
            items={[
              {
                label: '实时数据看板',
                key: 'home',
                icon: <HomeFilled />,
                theme: menuTheme,
              },
              {
                label: '实时设备状态',
                key: 'device',
                icon: <VideoCameraFilled />,
                theme: menuTheme,
              },
              {
                label: '设备告警记录',
                key: 'alarm',
                icon: <AlertFilled />,
                theme: menuTheme,
              },
              {
                key: 'statistics', // analysis
                icon: <AreaChartOutlined />,
                theme: menuTheme,
              },
            ]}
          >
          </Menu>
        </Sider>
        <Content style={{ overflow: 'auto' }}>
          {/* 内容区域 */}
          <Button onClick={() => setCount(count + 1)}>{`count is ${count}`}</Button>
          <div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
          <div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
          <div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
          <div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
          <div style={{ width: '300px', height: '300px', margin: '50px', backgroundColor: 'cadetblue' }}>Content</div>
          <div>Bottom</div>
        </Content>
      </Layout>
      <Footer style={{ background: colorBgContainer }}>
        <div>Footer</div>
      </Footer>
    </Layout>
  );
};

export default App;