import React from 'react';
import { findIndex } from 'lodash';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { BrowserRouter, StaticRouter, Route, NavLink } from 'react-router-dom';

import LoginPage from './login';
import router from '../../router';

import 'antd/dist/antd.css'
import './layout.css'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

class Page extends React.Component {
    constructor() {
        super();

        this.menuList = [
            {
                name: '数据统计',
                icon: 'deployment-unit',
                sub: [
                    {
                        path: '/sales',
                        name: '销售额统计'
                    },
                    {
                        path: '/top300/stock',
                        name: 'top300库存'
                    }
                ]
            },
            {
                name: '系统设置',
                icon: 'setting',
                sub: [
                    {
                        path: '/setting/account',
                        name: '账户管理'
                    }
                ]
            }
        ];
    }
    renderSubMenu(list = [], preKey) {
        return list.map((val, index) => {
            return <Menu.Item key={preKey + '_' + index}><NavLink to={val.path}>{val.name}</NavLink></Menu.Item>;
        });
    }
    renderMenu(menus, path) {
        let openKey = [];
        let selectKey = [];
        let breadcrumb = [{path: '/', name: '首页'}];

        const list = menus.map((val, index) => {
            let key = 'sub' + index;

            if (!selectKey.length) {
                let active = findIndex(val.sub, (o) => {
                    return o.path === path;
                });

                if (active > -1) {
                    openKey.push(key);
                    selectKey.push(key + '_' + active);
                    breadcrumb.push(val.sub[active]);
                }
            }

            return (
                <SubMenu
                    key={key}
                    title={
                      <span>
                        <Icon type={val.icon} />
                        {val.name}
                      </span>
                    }
                    >
                    {this.renderSubMenu(val.sub, key)}
                </SubMenu>
            )
        })

        return {
            openKey,
            selectKey,
            breadcrumb,
            list
        }
    }
    renderBreadcrumb(breadcrumb) {
        return (
            <Breadcrumb style={{ margin: '16px 0' }}>
                {breadcrumb.map((val, index) => {
                    return <Breadcrumb.Item key={index}>{val.name}</Breadcrumb.Item>;
                })}
            </Breadcrumb>
        )
    }
    render() {
        let { path, client } = this.props.context || {};

        const Router = client ? BrowserRouter : StaticRouter;

        if (path === '/login.html') {
            return <LoginPage></LoginPage>;
        }

        const subMenu = this.renderMenu(this.menuList, path);

        return (
            <Layout className="yoho-layout">
                <Header className="yoho-header">
                  YOHO!UFO
                </Header>
                <Layout className="ant-layout-has-sider">
                    <Router>
                        <Sider width={200} style={{ background: '#fff' }}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={subMenu.selectKey}
                                defaultOpenKeys={subMenu.openKey}
                                style={{ height: '100%', borderRight: 0 }}
                                >
                                {subMenu.list}
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '0 24px 24px' }}>
                            {this.renderBreadcrumb(subMenu.breadcrumb)}
                            <Content style={{
                                background: '#fff',
                                padding: 24,
                                margin: 0,
                                minHeight: 'auto',
                            }} >
                                {router.map((route, i) => (
                                        <Route key={i} path={route.path} component={route.component}
                                            exact={route.exact} />
                                    ))}
                            </Content>
                        </Layout>
                    </Router>
                </Layout>
            </Layout>
        )
    }
}

export default Page;