import React from 'react';
import {
    Route
} from 'react-router-dom';

import Header from './Header';
import Sidebar from './ControlPanel/Sidebar';
import Content from './ControlPanel/Content';

import {withTheme, injectSheet} from "../lib/theme";
import RouteCascaded from '../lib/RouteCascaded';
import StyleGrid from "../lib/StyleGrid";
import {i18nEvents} from "../lib/i18n";
import {NavMain} from "../component/NavMain";
import {SidebarsProvider} from "../component/Sidebars";

const styling = theme => ({
    center: {
        display: 'flex',
        height: '100%',
        width: '100%',
        flexGrow: 2,
        flexDirection: 'column',
        [StyleGrid.smUp]: {
            marginTop: 0,
            flexDirection: 'row',
            overflow: 'auto',
        },
    }
});


const MainRouteItem = (p) => (
    <React.Fragment>
        {p.route.sidebar ?
            <RouteCascaded {...p.route} component={p.route.sidebar}/> :
            null}

        <Content loading_lang={p.loading_lang}>
            {p.route.content ?
                <RouteCascaded {...p.route} exact={true} component={p.route.content} childComponent='content'/> :
                null}
        </Content>
    </React.Fragment>
);

class FactoryPage extends React.PureComponent {
    state = {
        loading_lang: false
    };

    constructor(props) {
        super(props);

        this.evt_id = {
            languageChanging: null,
            languageChanged: null
        };
    }

    componentWillUnmount() {
        i18nEvents.off('languageChanging', this.evt_id.languageChanging);
        i18nEvents.off('languageChanged', this.evt_id.languageChanged);
    }

    componentDidMount() {
        this.evt_id.languageChanging = i18nEvents.on('languageChanging', (() => {
            this.setState({loading_lang: true});
        }));
        this.evt_id.languageChanged = i18nEvents.on('languageChanged', (() => {
            this.setState({loading_lang: false});
        }));
    }

    render() {
        const {
            classes,
            routes
        } = this.props;

        return (
            <React.Fragment>
                <Header style={{background: 'rgba(50, 50, 50, 0.3)'}}/>

                <div className={classes.center}>
                    <SidebarsProvider>
                        <Sidebar center={NavMain} textToggle={true}/>

                        {/* routing for one level of sidebar */}
                        {routes.map((route, i) => (
                            <Route
                                key={i}
                                path={route.path}
                                render={props => (
                                    route.provider ?
                                        <route.provider><MainRouteItem route={route} loading_lang={this.state.loading_lang}/></route.provider> :
                                        <MainRouteItem route={route} loading_lang={this.state.loading_lang}/>
                                )}
                            />
                        ))}
                    </SidebarsProvider>
                </div>
            </React.Fragment>
        );
    }
}

export default withTheme(injectSheet(styling)(FactoryPage));
