import './App.css';
import React, {useContext} from 'react';
import {
    HomeOutlined,
    TeamOutlined,
    DashboardOutlined,
    FileProtectOutlined,
    CustomerServiceTwoTone,
    UserOutlined
} from '@ant-design/icons';
import {Layout, Menu, Image, Spin} from 'antd';
import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
import Home from "./views/Home"
import Dashboard from "./views/Dashboard"
import Orders from "./views/Orders"
import Orders_sub from "./views/Orders_sub"
import ProtectedRoute from "./views/ProtectedRoute"
import Customer_care_inchina from "./charts/Customer_care_inchina"
import Customer_care_potential from "./charts/Customer_care_potential"
import Customer_care_regular from "./charts/Customer_care_regular"
import Logo from './logo.png'
import {stores_Context} from "./config";
import {observer} from "mobx-react";


const App = () => {


    const {Content, Footer, Sider} = Layout;
    const {auth_store} = useContext(stores_Context);

    const menu_items = [
        {key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
        {key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,},
        {key: 5, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
        {
            key: 3, label: '客运', icon: <CustomerServiceTwoTone/>,
            children: [
                {key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink>},
                {key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink>},
                {key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink>},
            ]
        },
        {
            key: 4,
            label: '财务',
            icon: <TeamOutlined/>,
            children: [
                {key: 412, label: <NavLink to="/order">损益表</NavLink>},
                {key: 41, label: <NavLink to="/order">信用卡账单</NavLink>},
            ]
        },


    ];

    return (
        <BrowserRouter>
            <Layout
                style={{
                    minHeight: '100vh',
                }}
            >
                <Sider collapsible={false} defaultCollapsed={false} breakpoint="lg"
                       collapsedWidth="0">
                    <Image src={Logo} preview={false}/>
                    <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['3']} mode="inline"
                          items={menu_items}/>
                </Sider>
                <Layout className="site-layout">
                    <Content style={{
                        padding: 16,
                        minHeight: 480,
                    }}>
                        <Routes>
                            <Route path="/" element={<Home/>}/>
                            <Route element={<ProtectedRoute auth={['admin', 'director_bu']}/>}>
                                <Route path="/orders" element={<Orders/>}/>
                                <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title"
                                       element={<Orders_sub/>}/>
                                <Route path="/dashboard" element={<Dashboard/>}/>
                            </Route>
                            <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'customer_care']}/>}>
                                <Route path="/customer_care_inchina" element={<Customer_care_inchina/>}/>
                                <Route path="/customer_care_regular" element={<Customer_care_regular/>}/>
                                <Route path="/customer_care_potential" element={<Customer_care_potential/>}/>
                            </Route>
                        </Routes>
                    </Content>
                    <Footer
                        style={{
                            textAlign: 'center',
                        }}
                    >
                        <UserOutlined/> {auth_store.user.name} ({auth_store.user.userid})<br/>
                        Hainatravel Dashboard ©2022 Created by IT
                    </Footer>
                </Layout>
            </Layout>
        </BrowserRouter>
    );

}

export default observer(App);