import React from 'react';
import {withNamespaces} from 'react-i18next';
import {Redirect} from 'react-router-dom';

import {withTheme, injectSheet} from '../../lib/theme';
import {ApiRequest, POST} from "../../lib/ApiRequest";
import {withPusher} from "../../component/PushToApi/Pusher";
import i18n from "../../lib/i18n";
import apiArticle from './ApiArticle';

import ArticleDetailBaseEdit from './ArticleDetailBaseEdit';

const styling = theme => ({
    wrapper: {
        overflow: 'hidden'
    },
});

class ArticleCreate extends React.Component {
    state = {
        saving: false,
        newArticle: false,
    };


    pushNewArticle = (name, tag) => {
        const endpoint = 'content/article';

        this.props.addPushing(
            {
                name: 'pushNewArticle',
                context: endpoint,
                push: (resolve, reject) => {
                    this.setState({saving: 'progress'});
                    const data = {
                        name,
                        tag,
                        section: this.props.section
                    };
                    (new ApiRequest('api', POST, endpoint, data))
                        .debug(true)
                        .header({})
                        .exec()
                        .then((res) => {
                            if(res && res.data) {
                                resolve(res.data);
                            } else {
                                reject();
                            }
                        })
                        .catch(() => {
                            reject();
                        });
                }
            })
            .then((data) => {
                if(data.error) {
                    this.setState({saving: 'error'});
                    return;
                }

                this.setState({
                    saving: 'success',
                    newArticle: data.success
                });
                apiArticle.triggerList();
                setTimeout(() => {
                    this.setState({
                        newArticle: false
                    });
                }, 0);

                setTimeout(() => {
                    this.setState({saving: false});
                }, 4000);
            })
            .catch((data) => {
                if(!data.cancelled) {
                    this.setState({saving: 'error'});
                }
            });
    };

    render() {
        const {
            section
        } = this.props;

        return (
            <React.Fragment>
                {
                    (
                        this.state.newArticle
                    ) ? <Redirect to={'/' + i18n.languages[0] + '/content/' + this.props.section + '/' + this.state.newArticle}/>
                        : null
                }
                <ArticleDetailBaseEdit pushBaseData={this.pushNewArticle}
                                       articleInfo={{section: section}}
                                       open={true}
                                       saving={this.state.saving}
                                       create={true}
                />
            </React.Fragment>
        )
    };
}

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