import { Outlet, Link, useHref, useLocation } from "react-router-dom";
import { useEffect } from 'react';
import { observer } from "mobx-react";
import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, App as AntApp } from 'antd';
import {
  DownOutlined
} from '@ant-design/icons';
import 'antd/dist/reset.css';
import AppLogo from '@/assets/logo-gh.png'
import { useStore } from '@/stores/StoreContext.js';

const { Header, Content, Footer } = 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',
  },
]
function App() {
  
  const { authStore } = useStore();

  const href = useHref();

  let location = useLocation();
  useEffect(() => {
    // Check location
    console.info('location.pathname: ' + location.pathname)
  }, [location]);

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#00b96b',
        },
        algorithm: theme.defaultAlgorithm,
      }}
    >
      <AntApp>
      <Layout
        style={{
          minHeight: "100vh",
        }}>
        <Header className="header" style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
          <Row gutter={{ md: 24 }} justify="end">
            <Col span={22}>              
              <img src={AppLogo} className="logo" alt="App logo" />
              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[href]} items={
                [
                  { key: '/reservation/newest', label: <Link to="/reservation/newest">Reservation</Link> },
                  { key: '/feedback', label: <Link to="/feedback">Feedback</Link> },
                  { key: '/invoice/list', label: <Link to="/invoice/list">Invoice</Link> }
                ]
              } />
            </Col>
            <Col span={2}>
              <Dropdown
                menu={{
                  items
                }}
              >
                <a onClick={(e) => e.preventDefault()}>
                  <Space>
                    {authStore.login.username}
                    <DownOutlined />
                  </Space>
                </a>
              </Dropdown>
            </Col>
          </Row>
        </Header>
        <Content
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
            background: colorBgContainer,
          }}>
          <Outlet />
        </Content>
        <Footer>
        </Footer>
      </Layout>
      </AntApp>
    </ConfigProvider>
  );
}

export default observer(App);