import React from 'react';
import { Layout } from 'antd';
import { Spin } from 'antd';
import './global.scss';
import { CommonSiderMenu } from '../component/CommonSiderMenu/CommonSiderMenu.container';
import { CommonHeader } from '../component/CommonHeader/CommonHeader.component';
import { CommonContent } from '../component/CommonContent/CommonContent.component';
import { flattenRoutes } from '../utils/flattenRoutes';

const { Sider } = Layout;

export default class AppContainer extends React.Component {
    constructor(props) {
        super(props);
        const { history } = props;
        const { location } = history;

        this.state = {
            collapsed: false,
            currentIndex: 0
        };

        this.initActiveMatch(location.pathname, true);

        history.listen(location => {
            this.initActiveMatch(location.pathname);
        });
    }

    toggleMenu = () => {
        this.setState({
            collapsed: !this.state.collapsed
        });
    };

    initActiveMatch(param, isInit) {
        let pathname = param.split('/');
        if (pathname.length) {
            pathname = pathname[1];
            this.props.list.forEach((v, index) => {
                const url = v.url.slice(1);
                if (new RegExp(url).test(pathname)) {
                    if (isInit) {
                        this.state.currentIndex = index;
                    } else {
                        this.setState({
                            currentIndex: index
                        });
                    }
                }
            });
        }
    }

    get routesAndRedirects() {
        const {list,selfCode} = this.props;
        return flattenRoutes(list,selfCode) || {};
    }

    render() {
        const {
            systemDescription,
            headerBottomChildren,
            headerRightChildren,
            componentMap,
            selfCode,
            list = [],
            history,
            otherLink = null,
            hideSystemDescription = null
        } = this.props;

        const { collapsed, currentIndex } = this.state;
        const currentList = list[currentIndex]
            ? list[currentIndex].children
                ? list[currentIndex].children
                : []
            : [];
        return (
            <Spin spinning={!list.length}>
                {list.length ? (
                    <Layout>
                        <Sider
                            collapsible
                            trigger={null}
                            collapsed={collapsed}
                            className="common-sider"
                        >
                            {collapsed
                                ? hideSystemDescription
                                : systemDescription}
                            <CommonSiderMenu
                                history={history}
                                list={currentList}
                                allList={list}
                                collapsed={collapsed}
                                systemDescription={systemDescription}
                                currentIndex={currentIndex}
                            />
                        </Sider>
                        <Layout>
                            <CommonHeader
                                toggleMenu={this.toggleMenu}
                                list={list}
                                selfCode={selfCode}
                                collapsed={this.state.collapsed}
                                componentMap={componentMap}
                                currentIndex={currentIndex}
                                headerRightChildren={headerRightChildren}
                                otherLink={otherLink}
                            />
                            {headerBottomChildren}
                            <CommonContent
                                selfCode={selfCode}
                                routesAndRedirects={this.routesAndRedirects}
                                componentMap={componentMap}
                                currnetIndex={currentIndex}
                            />
                        </Layout>
                    </Layout>
                ) : null}
            </Spin>
        );
    }
}