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

import NavItem from './Item';
import {withNamespaces} from "react-i18next";

import {injectSheet} from '../../lib/theme';
import StyleGrid from '../../lib/StyleGrid';

const styling = theme => ({
    wrapper: {
        padding: 0,
        alignItems: 'center',
        [StyleGrid.smUp]: {
            padding: 0,
        },
    },
});

class Nav extends React.Component {

    render() {
        const {t} = this.props;
        const path = this.props.path || '';

        return (
            <React.Fragment>
                {this.props.content ?
                    <Route path={'/:lng' + path} render={props => (
                        <ul className={this.props.classes.wrapper}>
                            {this.props.content(props.match, t).map((route, index) => (
                                <NavItem key={index} route={route} notxt={this.props.notxt}/>
                            ))}
                        </ul>
                    )}/> : null}
            </React.Fragment>
        )
    };
}

export default withNamespaces('common')(injectSheet(styling)(Nav));