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 apiProduct from './ApiProduct';

import ProductDetailBaseEdit from './ProductDetailBaseEdit';

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

class ProductCreate extends React.Component {
    state = {
        saving: false,
        newProduct: false,
    };


    pushNewProduct = (name, product_type) => {
        const endpoint = 'shop/product';

        this.props.addPushing(
            {
                name: 'pushNewProduct',
                context: endpoint,
                push: (resolve, reject) => {
                    this.setState({saving: 'progress'});
                    const data = {
                        name,
                        product_type,
                        group: this.props.group
                    };
                    (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',
                    newProduct: data.success
                });
                apiProduct.triggerList();
                setTimeout(() => {
                    this.setState({
                        newProduct: false
                    });
                }, 0);

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

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

        return (
            <React.Fragment>
                {
                    (
                        this.state.newProduct
                    ) ? <Redirect to={'/' + i18n.languages[0] + '/shop/objects/' + this.props.group + '/' + this.state.newProduct}/>
                        : null
                }
                <ProductDetailBaseEdit pushBaseData={this.pushNewProduct}
                                    productInfo={{group: group}}
                                    open={true}
                                    saving={this.state.saving}
                                    create={true}
                />
            </React.Fragment>
        )
    };
}

export default withNamespaces('page--shop-product')(withPusher(withTheme(injectSheet(styling)(ProductCreate))));