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

import {injectSheet} from '../../lib/theme';
import ArticleCreate from './ArticleCreate';
import {withFeatureManager} from "../../component/FeatureManager";

const styling = () => ({});

class Content extends React.Component {
    render() {
        const {
            t, match,
            isAbilityEnabled
        } = this.props;

        return (
            <div>
                <h1>{t('title')}</h1>
                {match.params.section ?
                    <p>{t('choosen-section-is')}{match.params.section}</p> :
                    <p>{t('choose-section')}</p>}

                {match.params.section && isAbilityEnabled('content', 'create-article') ?
                    <React.Fragment>
                        <h2>{t('create-article-in-section')}</h2>
                        <ArticleCreate section={match.params.section}/>
                    </React.Fragment> : null}
            </div>
        );
    }
}

export default withNamespaces('page--content-section')(withFeatureManager(injectSheet(styling)(Content)));
