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

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

import {withTheme, injectSheet} from '../../lib/theme';
import OrdersList from './OrdersList';
import {storeOrder} from "./Stores/Order";
import {cancelPromise} from "../../component/cancelPromise";

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 = {
    savingStateUpdate: {}
};

class Orders extends React.Component {

    state = initialState;

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

    createSavingStateUpdate(name, val) {
        const savingStateUpdate = {...this.state.savingStateUpdate};
        savingStateUpdate[name] = val;
        return savingStateUpdate;
    }

    fetch(force = false) {
        this.props.loadOrderList(this.props.match.params.state ? this.props.match.params.state : false, force);
    }

    pushStateUpdate = (index, order_id, new_state) => {
        const {cancelPromise, updateOrderState} = this.props;

        this.setState({savingStateUpdate: this.createSavingStateUpdate(order_id, 'progress')});
        cancelPromise(updateOrderState(index, order_id, this.props.match.params.state, new_state))
            .then((data) => {
                this.setState({
                    savingStateUpdate: this.createSavingStateUpdate(order_id, 'success'),
                });

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

    componentDidUpdate(prevProps) {
        if(prevProps.match.params.state !== this.props.match.params.state ||
            prevProps.match.params.state !== this.props.match.params.state) {
            this.fetch(true);
        }
    }

    componentDidMount() {
        this.fetch();
    }

    render() {
        const {
            t,
            orders, loadingOrders
        } = this.props;

        return (
            <React.Fragment>
                <h1>{t('title')}</h1>
                {
                    true === loadingOrders ?
                        (
                            <React.Fragment>
                                {/*<OrdersControl/>*/}
                                <OrdersList orders={orders}
                                            state={this.props.match.params.state}
                                            pushStateUpdate={this.pushStateUpdate}
                                            savingStateUpdate={this.state.savingStateUpdate}/>
                            </React.Fragment>
                        ) :
                        ('progress' === loadingOrders || 'error' === loadingOrders ?
                            <Loading style={{
                                wrapper: {margin: 0},
                                item: ('error' === loadingOrders ? {borderColor: this.props.theme.errorColor} : {}),
                            }}/> :
                            null)
                }
            </React.Fragment>
        )
    };
}

export default withNamespaces('page--shop-order')(cancelPromise(storeOrder(withTheme(injectSheet(theming)(Orders)))));