import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './App.css';
import {Button, Dropdown, Layout, Menu, Popconfirm} from "antd";
import {Link, Route, Switch} from "react-router-dom";
import Dashboard from "./components/dashboard/Dashboard";
import Asset from "./components/asset/Asset";
import Access from "./components/access/Access";
import User from "./components/user/User";
import OnlineSession from "./components/session/OnlineSession";
import OfflineSession from "./components/session/OfflineSession";
import Login from "./components/Login";
import DynamicCommand from "./components/command/DynamicCommand";
import Credential from "./components/credential/Credential";
import LogoWithName from './images/logo-with-name.svg'
import Logo from './images/logo.svg'
import {
    ApiOutlined,
    AuditOutlined,
    BlockOutlined,
    CloudServerOutlined,
    CodeOutlined,
    ControlOutlined,
    DashboardOutlined,
    DesktopOutlined,
    DisconnectOutlined,
    DownOutlined,
    FolderOutlined,
    GithubOutlined,
    HddOutlined,
    IdcardOutlined,
    InsuranceOutlined,
    LinkOutlined,
    LoginOutlined,
    LogoutOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    SafetyCertificateOutlined,
    SettingOutlined,
    SolutionOutlined,
    TeamOutlined,
    UserOutlined,
    UserSwitchOutlined
} from '@ant-design/icons';
import Info from "./components/user/Info";
import request from "./common/request";
import {message} from "antd/es";
import Setting from "./components/setting/Setting";
import BatchCommand from "./components/command/BatchCommand";
import {isEmpty, NT_PACKAGE} from "./utils/utils";
import {getCurrentUser, isAdmin} from "./service/permission";
import UserGroup from "./components/user/UserGroup";
import LoginLog from "./components/devops/LoginLog";
import Term from "./components/access/Term";
import Job from "./components/devops/Job";
import {Header} from "antd/es/layout/layout";
import Security from "./components/devops/Security";
import Storage from "./components/devops/Storage";
import MyFile from "./components/asset/MyFile";
import Strategy from "./components/user/Strategy";
import AccessGateway from "./components/asset/AccessGateway";
import MyAsset from "./components/asset/MyAsset";

const {Footer, Content, Sider} = Layout;

const {SubMenu} = Menu;
const headerHeight = 60;

class App extends Component {

    state = {
        collapsed: false,
        current: sessionStorage.getItem('current'),
        openKeys: sessionStorage.getItem('openKeys') ? JSON.parse(sessionStorage.getItem('openKeys')) : [],
        user: {
            'nickname': '未定义'
        },
        package: NT_PACKAGE(),
        triggerMenu: true,
        logo: LogoWithName,
        logoWidth: 140
    };

    onCollapse = () => {
        let collapsed = !this.state.collapsed;
        if (collapsed) {
            this.setState({
                logo: Logo,
                logoWidth: 46,
                collapsed: collapsed,
            });
        } else {
            this.setState({
                logo: LogoWithName,
                logoWidth: 140,
                collapsed: collapsed,
            });
        }
    };

    componentDidMount() {
        let hash = window.location.hash;
        let current = hash.replace('#/', '');
        if (isEmpty(current)) {
            current = 'dashboard';
        }
        this.setCurrent(current);
        this.getInfo();
    }

    async getInfo() {

        let result = await request.get('/account/info');
        if (result['code'] === 1) {
            sessionStorage.setItem('user', JSON.stringify(result['data']));
            this.setState({
                user: result['data'],
                triggerMenu: true
            })
        } else {
            message.error(result['message']);
        }
    }

    updateUser = (user) => {
        this.setState({
            user: user
        })
    }

    setCurrent = (key) => {
        this.setState({
            current: key
        })
        sessionStorage.setItem('current', key);
    }

    subMenuChange = (openKeys) => {
        this.setState({
            openKeys: openKeys
        })
        sessionStorage.setItem('openKeys', JSON.stringify(openKeys));
    }

    confirm = async () => {
        let result = await request.post('/account/logout');
        if (result['code'] !== 1) {
            message.error(result['message']);
        } else {
            message.success('退出登录成功，即将跳转至登录页面。');
            window.location.reload();
        }
    }

    render() {

        const menu = (
            <Menu>

                <Menu.Item>
                    <Link to={'/info'}>
                        <SolutionOutlined/> 个人中心
                    </Link>
                </Menu.Item>
                <Menu.Divider/>

                <Menu.Item>

                    <Popconfirm
                        key='login-btn-pop'
                        title="您确定要退出登录吗?"
                        onConfirm={this.confirm}
                        okText="确定"
                        cancelText="取消"
                        placement="left"
                    >
                        <LogoutOutlined/> 退出登录
                    </Popconfirm>
                </Menu.Item>

            </Menu>
        );

        return (

            <Switch>
                <Route path="/access" component={Access}/>
                <Route path="/term" component={Term}/>
                <Route path="/login"><Login updateUser={this.updateUser}/></Route>

                <Route path="/">
                    <Layout className="layout" style={{minHeight: '100vh'}}>

                        {
                            isAdmin() ?
                                <>
                                    <Sider collapsible collapsed={this.state.collapsed} trigger={null}>
                                        <div className="logo">
                                            <img src={this.state.logo} alt='logo' width={this.state.logoWidth}/>
                                        </div>

                                        <Menu
                                            onClick={(e) => this.setCurrent(e.key)}
                                            selectedKeys={[this.state.current]}
                                            onOpenChange={this.subMenuChange}
                                            defaultOpenKeys={this.state.openKeys}
                                            theme="dark" mode="inline" defaultSelectedKeys={['dashboard']}
                                            inlineCollapsed={this.state.collapsed}
                                            style={{lineHeight: '64px'}}>

                                            <Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
                                                <Link to={'/'}>
                                                    控制面板
                                                </Link>
                                            </Menu.Item>

                                            <SubMenu key='resource' title='资源管理' icon={<CloudServerOutlined/>}>
                                                <Menu.Item key="asset" icon={<DesktopOutlined/>}>
                                                    <Link to={'/asset'}>
                                                        资产列表
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="credential" icon={<IdcardOutlined/>}>
                                                    <Link to={'/credential'}>
                                                        授权凭证
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="dynamic-command" icon={<CodeOutlined/>}>
                                                    <Link to={'/dynamic-command'}>
                                                        动态指令
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="access-gateway" icon={<ApiOutlined/>}>
                                                    <Link to={'/access-gateway'}>
                                                        接入网关
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>

                                            <SubMenu key='audit' title='会话审计' icon={<AuditOutlined/>}>
                                                <Menu.Item key="online-session" icon={<LinkOutlined/>}>
                                                    <Link to={'/online-session'}>
                                                        在线会话
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="offline-session" icon={<DisconnectOutlined/>}>
                                                    <Link to={'/offline-session'}>
                                                        历史会话
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>
                                            <SubMenu key='ops' title='系统运维' icon={<ControlOutlined/>}>
                                                <Menu.Item key="login-log" icon={<LoginOutlined/>}>
                                                    <Link to={'/login-log'}>
                                                        登录日志
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="job" icon={<BlockOutlined/>}>
                                                    <Link to={'/job'}>
                                                        计划任务
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="access-security" icon={<SafetyCertificateOutlined/>}>
                                                    <Link to={'/access-security'}>
                                                        访问安全
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="storage" icon={<HddOutlined/>}>
                                                    <Link to={'/storage'}>
                                                        磁盘空间
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>

                                            <SubMenu key='user-manage' title='用户管理' icon={<UserSwitchOutlined/>}>
                                                <Menu.Item key="user" icon={<UserOutlined/>}>
                                                    <Link to={'/user'}>
                                                        用户管理
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="user-group" icon={<TeamOutlined/>}>
                                                    <Link to={'/user-group'}>
                                                        用户组管理
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="strategy" icon={<InsuranceOutlined/>}>
                                                    <Link to={'/strategy'}>
                                                        授权策略
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>
                                            <Menu.Item key="my-file" icon={<FolderOutlined/>}>
                                                <Link to={'/my-file'}>
                                                    我的文件
                                                </Link>
                                            </Menu.Item>
                                            <Menu.Item key="info" icon={<SolutionOutlined/>}>
                                                <Link to={'/info'}>
                                                    个人中心
                                                </Link>
                                            </Menu.Item>
                                            <Menu.Item key="setting" icon={<SettingOutlined/>}>
                                                <Link to={'/setting'}>
                                                    系统设置
                                                </Link>
                                            </Menu.Item>
                                        </Menu>
                                    </Sider>

                                    <Layout className="site-layout">
                                        <Header className="site-layout-background"
                                                style={{padding: 0, height: headerHeight, zIndex: 20}}>
                                            <div className='layout-header'>
                                                <div className='layout-header-left'>
                                                    {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                                        className: 'trigger',
                                                        onClick: this.onCollapse,
                                                    })}
                                                </div>

                                                <div className='layout-header-right'>
                                                    <div className={'layout-header-right-item'}>
                                                        <a style={{color: 'black'}} target='_blank'
                                                           href='https://github.com/dushixiang/next-terminal'
                                                           rel='noreferrer noopener'>
                                                            <GithubOutlined/>
                                                        </a>
                                                    </div>
                                                </div>

                                                <div className='layout-header-right'>
                                                    <Dropdown overlay={menu}>
                                                        <div className='nickname layout-header-right-item'>
                                                            {getCurrentUser()['nickname']} &nbsp;<DownOutlined/>
                                                        </div>
                                                    </Dropdown>
                                                </div>
                                            </div>
                                        </Header>

                                        <Route path="/" exact component={Dashboard}/>
                                        <Route path="/user" component={User}/>
                                        <Route path="/user-group" component={UserGroup}/>
                                        <Route path="/asset" component={Asset}/>
                                        <Route path="/credential" component={Credential}/>
                                        <Route path="/dynamic-command" component={DynamicCommand}/>
                                        <Route path="/batch-command" component={BatchCommand}/>
                                        <Route path="/online-session" component={OnlineSession}/>
                                        <Route path="/offline-session" component={OfflineSession}/>
                                        <Route path="/login-log" component={LoginLog}/>
                                        <Route path="/info" component={Info}/>
                                        <Route path="/setting" component={Setting}/>
                                        <Route path="/job" component={Job}/>
                                        <Route path="/access-security" component={Security}/>
                                        <Route path="/access-gateway" component={AccessGateway}/>
                                        <Route path="/my-file" component={MyFile}/>
                                        <Route path="/storage" component={Storage}/>
                                        <Route path="/strategy" component={Strategy}/>

                                        <Footer style={{textAlign: 'center'}}>
                                            Copyright © 2020-2022 dushixiang, All Rights Reserved.
                                            Version:{this.state.package['version']}
                                        </Footer>
                                    </Layout>
                                </> :
                                <>
                                    <Header style={{padding: 0}}>
                                        <div className='km-header'>
                                            <div style={{flex: '1 1 0%'}}>
                                                <Link to={'/'}>
                                                    <img src={this.state.logo} alt='logo' width={120}/>
                                                </Link>

                                                <Link to={'/my-file'}>
                                                    <Button type="text" style={{color: 'white'}}
                                                            icon={<FolderOutlined/>}>
                                                        文件
                                                    </Button>
                                                </Link>

                                                <Link to={'/dynamic-command'}>
                                                    <Button type="text" style={{color: 'white'}}
                                                            icon={<CodeOutlined/>}>
                                                        指令
                                                    </Button>
                                                </Link>
                                            </div>
                                            <div className='km-header-right'>
                                                <Dropdown overlay={menu}>
                                                <span className={'km-header-right-item'}>
                                                    {getCurrentUser()['nickname']}
                                                </span>
                                                </Dropdown>
                                            </div>
                                        </div>
                                    </Header>
                                    <Content className='km-container'>
                                        <Layout>
                                            <Route path="/" exact component={MyAsset}/>
                                            <Content className={'kd-content'}>
                                                <Route path="/info" component={Info}/>
                                                <Route path="/my-file" component={MyFile}/>
                                                <Route path="/dynamic-command" component={DynamicCommand}/>
                                            </Content>
                                        </Layout>
                                    </Content>
                                    <Footer style={{textAlign: 'center'}}>
                                        Copyright © 2020-2022 dushixiang, All Rights Reserved.
                                        Version:{this.state.package['version']}
                                    </Footer>
                                </>
                        }


                    </Layout>
                </Route>
            </Switch>

        );
    }
}

export default App;