import BaseComponent from './basic-component';
import { alias } from '@ember/object/computed';
import { isArray } from '@ember/array';
import { setProperties } from '@ember/object';
import { isNone } from '@ember/utils';
import { inject as service } from '@ember/service';
import $ from 'jquery'

export default BaseComponent.extend({
    classNames: ['wizard-actions'],
    type: 'create',
    form: true,
    state: service('state'),
    successMsg: alias('success-message'),
    postUrl: alias('post-url'),
    backRouteName: alias('back-route'),
    backRouteParams: alias('back-route-params'), 
    hideGoback: alias('no-goback'), 
    hideSubmit: alias('no-submit'), 
    'back-to-list': false,
    backToList() {
        const me = this;
        let listRouteName = me.get('routeName').replace(/[^.]+$/, 'list');
        // find route
        if (!me.getRoute(listRouteName)) {
            // no list route found, find parent
            listRouteName = listRouteName.replace(/[^.]+\.[^.]+$/, 'list');
        }
        me.transitionToRoute(listRouteName, 1);
    },
    transitionToRoute(name, params, queryParams) {
        const me = this;
        let args = [name];
        if (!isNone(params)) {
            if (isArray(params)) {
                args = args.concat(params);
            }
            else if (params !== false) {
                args.push(params);
            }
        }
        isNone(queryParams) || args.push({queryParams: queryParams});
        me.get('router').transitionTo(...args);
    },
    actions: {
        goback() {
            const me = this;
            let routeName = me.get('backRouteName');
            if (routeName) {
                me.transitionToRoute(routeName, 
                    me.get('backRouteParams'), 
                    me.get('backRouteQueryParams'));
            }
            else if (me.get('back-to-list')) {
                me.backToList();
            }
            else {
                me.get('state').back() || me.backToList();
            }
        },
        save() {
            const me = this;
            if (!me.validate()) {
                me.dialog.confirm('Are you sure to submit?', () => {
                    me.postData().then((m) => {
                        console.info('Post Model Result: ', m);
                        // write back 
                        setProperties(me.getModel(), m);
                        me.alertMessage();
                        me.send('goback');
                    });
                }); 
            }
        }
    },
    isCreate() {
        return this.get('type') === 'create';
    },
    validate() {
        const me = this;
        let vr = me.get('service').validate(
            me.getModel(), me.get('type') + 'Constraints');
        me.set('route.controller.errors', vr || {});
        return vr;
    },
    postData() {
        let me = this;
        let data = me.get('form') ? 
            new FormData($(me.element).closest('form')[0]) : 
                me.getModel();
        let postUrl = me.get('postUrl');
        if (postUrl) {
            return me.get('store').ajaxPost(postUrl, data);
        }
        let service = me.get('service');
        return me.isCreate() ? service.create(data) : service.update(data);
    },
    alertMessage() {
        let me = this;
        me.message.alert(me.get('successMsg') || 
            (me.isCreate() ? 'Created successfully' : 'Updated successfully'));
    },
    getModel() {
        return this.get('route.controller.model');
    }
});