import React from 'react';
import {withNamespaces} from "react-i18next";

import {withTheme, injectSheet} from '../../lib/theme';
import RouteCascaded from '../../lib/RouteCascaded';

import Loading from "../../component/Loading";

import Nav from "../../component/Nav/Nav";
import Sidebar from "../../layout/ControlPanel/Sidebar";
import StyleGrid from "../../lib/StyleGrid";
import apiProduct from './ApiProduct';

const theming = (theme) => ({
    sidebarTop: {
        margin: 'auto ' + theme.gutter.base + 'px',
        [StyleGrid.smUp]: {
            margin: '0 0 ' + theme.gutter.base * 2 + 'px 0',
        }
    }
});

const initialState = {
    data: [],
    loaded: false
};

class NavSection extends React.Component {

    state = initialState;

    componentWillUnmount() {
        this.setState(initialState);
        apiProduct.offList('product-list');
    }

    fetch() {
        apiProduct.onList(
            this.props.match.params.group,
            (state) => {
                this.setState({loaded: state});
            },
            (data) => {
                this.setState({data});
            },
            'product-list'
        );
    }

    componentDidUpdate(prevProps) {
        if(prevProps.match.params.group !== this.props.match.params.group) {
            this.fetch();
        }
    }

    componentDidMount() {
        this.fetch();
    }

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

        const navContent = (match) => {

            let content = [];

            this.state.data.forEach((product) => {
                content.push({
                    path: this.props.match.url + '/' + product.id,
                    lbl: {txt: product.name},
                })
            });

            return content;
        };
        const SideBarTop = p => (<p className={classes.sidebarTop}>{t('nav.product-list')}</p>);

        return (
            <React.Fragment>
                {
                    true === this.state.loaded ?
                        0 < this.state.data.length ?
                            <Sidebar top={SideBarTop}
                                     center={props => <Nav path={'/shop/'} content={navContent}/>}/> :
                            <Sidebar top={SideBarTop}
                                     center={props => <p className={classes.sidebarTop} style={{
                                         fontStyle: 'italic'
                                     }}>{t('view-error.no-product-in-group')}</p>}/> :
                        ('progress' === this.state.loaded || 'error' === this.state.loaded ?
                            <Loading style={{
                                wrapper: {margin: 0},
                                item: ('error' === this.state.loaded ? {borderColor: this.props.theme.errorColor} : {}),
                            }}/> :
                            null)
                }

                {this.props.routes ? this.props.routes.map((route, i) => (
                    route.sidebar ?
                        <RouteCascaded key={i} {...route} component={route.sidebar}/>
                        : null
                )) : null}
            </React.Fragment>
        )
    };
}

export default withNamespaces('page--shop')(withTheme(injectSheet(theming)(NavSection)));