import React from 'react';

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

import Loading from "../../component/Loading";
import {ApiRequest, GET} from '../../lib/ApiRequest';

import Nav from "../../component/Nav/Nav";
import Sidebar from "../../layout/ControlPanel/Sidebar";

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

class NavSection extends React.Component {

    state = initialState;

    componentWillUnmount() {
        this.setState(initialState);
    }

    fetch() {
        this.setState({loaded: 'progress'});
        (new ApiRequest('api', GET, 'content/section/' + this.props.match.params.section + '/article'))
            .debug(true)
            .header({})
            .exec()
            .then((res) => {
                if(res && res.data) {
                    if(res.data) {
                        this.setState({
                            data: res.data,
                            loaded: true
                        });
                    }
                    if(res.data.error) {
                        this.setState({
                            loaded: 'error'
                        });
                    }
                } else {
                    this.setState({
                        loaded: 'error'
                    });
                }
            })
            .catch(() => {
                this.setState({
                    loaded: 'error'
                });
            });
    }

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

    componentDidMount() {
        this.fetch();
    }

    render() {
        const navContent = (match) => {

            let content = [];

            for(let id in this.state.data) {
                if(this.state.data.hasOwnProperty(id)) {
                    content.push({
                        path: this.props.match.url + '/' + id,
                        lbl: {txt: id},
                    })
                }
            }

            return content;
        };

        return (
            <React.Fragment>
                {
                    true === this.state.loaded ?
                        <Sidebar center={(props => <Nav path='/content' content={navContent}/>)}/> :
                        ('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 withTheme(NavSection);