(function( $, navSettingsConfig ) {

    'use strict';

    if ( ! navSettingsConfig ) {
        return;
    }

    Vue.config.devtools = true;

    window.JetMenuNavLocationsSettings = {

        instance: null,

        init: function() {
            this.initLocationsInstance();
        },

        initLocationsInstance: function() {

            if ( ! $( '#jet-menu-settings-fields' )[0] ) {
                return;
            }

            this.instance = new Vue( {
                el: '#jet-menu-settings-fields',

                data: {
                    debonceSavingInterval: null,
                    ajaxAction: null,
                    savingState: false,
                    navSettings: navSettingsConfig,
                    locationSettings: navSettingsConfig.locationSettings || {},
                    optionPresetList: navSettingsConfig.optionPresetList || [],
                    optionMenuList: navSettingsConfig.optionMenuList || [],
                },

                mounted: function() {
                    this.$el.className = 'is-mounted';
                },

                watch: {
                    locationSettings: {
                        handler: function() {
                            clearInterval( this.debonceSavingInterval );
                            this.debonceSavingInterval = setTimeout( this.saveSettings, 100 );
                        },
                        deep: true
                    }
                },

                computed: {
                    isPresetsVisible: function() {
                        return 0 !== this.optionPresetList.length;
                    },

                    isMobileLayoutVisible: function() {
                        return 1 < this.optionMenuList.length;
                    },
                },

                methods: {
                    saveSettings: function() {

                        var self = this;

                        this.ajaxAction = $.ajax( {
                            type: 'POST',
                            url: ajaxurl,
                            dataType: 'json',
                            data: {
                                action: 'jet_save_settings',
                                nonce: window.JetMenuNavSettingsConfig ? ( window.JetMenuNavSettingsConfig._nonce || '' ) : '',
                                data: {
                                    menuId: self.navSettings.currentMenuId,
                                    settings: self.locationSettings
                                }
                            },
                            beforeSend: function() {

                                if ( null !== self.ajaxAction ) {
                                    self.ajaxAction.abort();
                                }

                                self.savingState = true;
                            },
                            success: function( responce ) {

                                self.savingState = false;

                                if ( self.$CXNotice && self.$CXNotice.add ) {
                                    self.$CXNotice.add( {
                                        message: responce.data.message,
                                        type: responce.success ? 'success' : 'error',
                                        duration: 4000,
                                    } );
                                }
                            }
                        } );
                    }
                }
            } );
        }
    };

    window.JetMenuNavLocationsSettings.init();

})( jQuery, window.JetMenuNavSettingsConfig );