import { Outlet, Link, useNavigation } from "react-router-dom";
import { Breadcrumb, Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col } from 'antd';
import {
  UserOutlined,
  VideoCameraOutlined,
  DownOutlined
} from '@ant-design/icons';
import 'antd/dist/reset.css';

const { Header, Content, Footer, Sider } = Layout;
const items = [
  {
    label: (
      <a target="_blank" rel="noopener noreferrer" href="#">
        Profile
      </a>
    ),
    key: '0',
  },
  {
    label: (
      <a target="_blank" rel="noopener noreferrer" href="#">
        Privacy
      </a>
    ),
    key: '1',
  },
  {
    type: 'divider',
  },
  {
    label: (
      <a target="_blank" rel="noopener noreferrer" href="#">
        Logout
      </a>
    ),
    key: '3',
  },
]
export default function App() {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#00b96b',
        },
        algorithm: theme.defaultAlgorithm,
      }}
    >
      <Layout
        style={{
          minHeight: "100vh",
        }}>
        <Header className="header">
          <Row gutter={{ md: 24 }} justify="end">

            <Col span={22}>
              <div className="logo" />

              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={
                [
                  { key: 1, label: <Link to="/plan/newest">Plan</Link> },
                  { key: 2, label: <Link to="/invoice/list">Invoice</Link> },
                  { key: 3, label: <Link to="/feedback/list">Feedback</Link> }
                ]
              } />
            </Col>
            <Col span={2}>
              <Dropdown
                menu={{
                  items
                }}
              >
                <a onClick={(e) => e.preventDefault()}>
                  <Space>
                    LiaoYijun
                    <DownOutlined />
                  </Space>
                </a>
              </Dropdown>
            </Col>
          </Row>


        </Header>

        <Layout>
          <Sider collapsible={true} breakpoint="lg">
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              style={{
                height: '100%',
                borderRight: 0,
              }}
              items={[
                {
                  key: '1',
                  icon: <UserOutlined />,
                  label: <Link to="/plan/1">Jim</Link>,
                },
                {
                  key: '2',
                  icon: <VideoCameraOutlined />,
                  label: <Link to="/plan/2">Bill</Link>,
                },
              ]}
            />
          </Sider>
          <Layout style={{
            padding: '0 24px 24px',
          }}>
            <Content
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: colorBgContainer,
              }}>
              <Outlet />
            </Content>
            <Footer>
            </Footer>
          </Layout>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
}