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

import {withTheme, injectSheet} from '../../lib/theme';
import NewsletterUserListItem from './NewsletterUserListItem';

const theming = (theme) => ({
    wrapper: {
        border: 0,
        width: '100%'
    },
    item: {},
    cellHead: {
        textAlign: 'left',
        padding: theme.gutter.base * 8 + 'px ' + theme.gutter.base + 'px ' + theme.gutter.base * 4 + 'px ' + theme.gutter.base + 'px'
    }
});

class NewsletterUserList extends React.Component {

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


        return (
            <table className={classes.wrapper}>
                <tbody>
                <tr className={classes.item}>
                    <th className={classes.cellHead}>{t('list.head.state')}</th>
                    <th className={classes.cellHead}>{t('list.head.email')}</th>
                    <th className={classes.cellHead}>{t('list.head.subscribing-time')}</th>
                    <th className={classes.cellHead}>{t('list.head.optin-time')}</th>
                    <th className={classes.cellHead}>{t('list.head.unsubscribing-time')}</th>
                </tr>
                {users.map((user, i) => (
                    <NewsletterUserListItem item={user}
                                            t={t}
                                            key={i}
                                            index={i}
                    />
                ))}
                </tbody>
            </table>
        )
    };
}

export default withNamespaces('page--marketing-newsletter-user')(withTheme(injectSheet(theming)(NewsletterUserList)));