import React from 'react';
import {MdAutorenew, MdCheck, MdNotInterested} from "react-icons/md";

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

const theming = (theme) => ({
    wrapper: {
        display: 'table',
        tableLayout: 'fixed',
        border: 0,
        width: '100%'
    },
    item: {
        display: 'table-row'
    },
    cell: {
        display: 'table-cell',
        padding: theme.gutter.base * 2 + 'px ' + theme.gutter.base + 'px',
        '&:first-child': {
            paddingLeft: 0
        },
        '&:last-child': {
            paddingRight: 0
        }
    }
});

class NewsletterUserListItem extends React.Component {

    state = {
        showDetails: false
    };

    componentDidUpdate(prevProps) {
        if(prevProps.item !== this.props.item) {
            this.setState({
                showDetails: false
            });
        }
    }

    componentDidMount() {
    }

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

        return (
            <React.Fragment>
                <tr className={classes.item}>
                    <td className={classes.cell} style={{textAlign: 'center'}}>
                        {item.state ?
                            'subscribing' === item.state ?
                                <MdAutorenew/> :
                                'subscribed' === item.state ?
                                    <MdCheck/> :
                                    'unsubscribed' === item.state ?
                                        <MdNotInterested/> :
                                        t('list.cell.state-unkown')
                            : t('list.cell.state-error')}
                    </td>
                    <td className={classes.cell}>
                        {item.email}
                    </td>
                    <td className={classes.cell}>
                        {item.subscribing_time ?
                            item.subscribing_time
                            : t('list.cell.not-done')}
                    </td>
                    <td className={classes.cell}>
                        {item.optin_time ?
                            item.optin_time
                            : t('list.cell.not-done')}
                    </td>
                    <td className={classes.cell}>
                        {item.unsubscribe_time ?
                            item.unsubscribe_time
                            : t('list.cell.not-done')}
                    </td>
                </tr>
            </React.Fragment>
        )
    };
}

export default withTheme(injectSheet(theming)(NewsletterUserListItem));