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

import Loading from "../../component/Loading";

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

const theming = theme => ({
    button: {
        fontSize: '0.875rem',
        background: 'none',
        padding: theme.gutter.base + 'px ' + theme.gutter.base * 2 + 'px',
        '&:first-child': {
            paddingLeft: 0,
        },
        '&:last-child': {
            paddingRight: 0,
        }
    },
    subTitle: {
        margin: 0
        //margin: '-12px 0 6px 0',
    }
});

const initialState = {
    users: [],
    hasLocales: false,
    localeActive: false,
    localesPossible: [],
    locales: [],
    productTypesPossible: [],
    loaded: false,
    savingStateUpdate: {}
};

class NewsletterUser extends React.Component {

    state = initialState;

    componentWillUnmount() {
        this.setState(initialState);
    }

    //
    // Api Fetch and Push

    fetch() {
        this.setState({loaded: 'progress'});
        (new ApiRequest('api', POST, 'marketing/newsletter/user/list'))
            .debug(true)
            .header({})
            .exec()
            .then((res) => {
                if(res && res.data) {
                    if(res.data) {

                        this.setState({
                            users: res.data,
                            loaded: true
                        });
                    }
                    if(res.data.error) {
                        this.setState({
                            loaded: 'error'
                        });
                    }
                } else {
                    this.setState({
                        loaded: 'error'
                    });
                }
            })
            .catch(() => {
                this.setState({
                    loaded: 'error'
                });
            });
    }

    //
    // Default Lifecycles

    componentDidMount() {
        this.fetch();
    }

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

        return (
            <React.Fragment>
                <h1>{t('title')}</h1>
                {
                    true === this.state.loaded ?
                        (
                            <React.Fragment>
                                <NewsletterUserList users={users}/>
                            </React.Fragment>
                        ) :
                        ('progress' === this.state.loaded || 'error' === this.state.loaded ?
                            <Loading style={{
                                wrapper: {margin: 0},
                                item: ('error' === this.state.loaded ? {borderColor: this.props.theme.errorColor} : {}),
                            }}/> :
                            null)
                }
            </React.Fragment>
        )
    };
}

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