import React from 'react';
import {withNamespaces} from 'react-i18next';
import StyleGrid from "../../lib/StyleGrid";
import {withTheme, injectSheet} from '../../lib/theme';

const styling = theme => ({
    subTitle: {},
    dateWrapper: {
        display: 'flex',
        width: '100%',
        flexWrap: 'wrap',
        margin: '6px 0'
    },
    dateSingle: {
        [StyleGrid.smx]: {
            width: '100%'
        },
        '&:last-child': {
            [StyleGrid.smUp]: {
                marginLeft: '12px'
            }
        }
    },
    dateLbl: {
        marginRight: '6px',
        fontSize: '0.875rem'
    },
    dateValue: {
        fontSize: '0.875rem'
    }
});

class ArticleDetail extends React.Component {

    componentWillUnmount() {
    }

    hasData(name) {
        return this.props.data.hasOwnProperty(name);
    }

    getData(name) {
        if(this.hasData(name)) {
            return this.props.data[name];
        }
        return undefined;
    }

    hasDataMeta(name) {
        return (this.props.data && this.props.data.meta && this.props.data.meta.hasOwnProperty(name));
    }

    getDataMeta(name) {
        if(this.hasDataMeta(name)) {
            return this.props.data.meta[name];
        }
        return undefined;
    }

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

        return (
            <React.Fragment>
                {this.hasDataMeta('_date') ?
                    <div className={classes.dateWrapper}>
                        {data.meta['_date'].create ?
                            <div className={classes.dateSingle}>
                                <span className={classes.dateLbl}>{t('date.created')}</span>
                                <span className={classes.dateValue}>{data.meta['_date'].create}</span>
                            </div>
                            : ''}
                        {data.meta['_date'].update ?
                            <div className={classes.dateSingle}>
                                <span className={classes.dateLbl}>{t('date.updated')}</span>
                                <span className={classes.dateValue}>{data.meta['_date'].update}</span>
                            </div>
                            : ''}
                    </div>
                    : ''}
            </React.Fragment>
        )
    };
}

export default withNamespaces('page--content-article')(withTheme(injectSheet(styling)(ArticleDetail)));