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

import {injectSheet} from '../../lib/theme';
import ProductCreate from './ProductCreate';
import {needsPermission} from "../../feature/AuthPermission";
import {PERM_ADMIN, FEATURE_SHOP_PRODUCT} from "../../permissions";

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

const CreateProduct = needsPermission([PERM_ADMIN, FEATURE_SHOP_PRODUCT])((props) => (
    <React.Fragment>
        <h2>{props.t('group.create-product-in-group')}</h2>
        <ProductCreate group={props.group}/>
    </React.Fragment>
));

class Content extends React.Component {
    render() {
        const {t} = this.props;
        return (
            <div>
                <h1>{t('group.title')}</h1>
                {this.props.match.params.group ?
                    <p>{t('group.choosen-group-is')} {this.props.match.params.group}</p> :
                    <p>{t('group.choose-group')}</p>}

                {this.props.match.params.group ?
                    <CreateProduct group={this.props.match.params.group} t={t}/>
                    : null}
            </div>
        );
    }
}

export default withNamespaces('page--shop')(injectSheet(styling)(Content));
