var extensions_data = {
    genericText: sbi_about.genericText,
    links: sbi_about.links,
    extentions_bundle: sbi_about.extentions_bundle,
    supportPageUrl: sbi_about.supportPageUrl,
    plugins: sbi_about.pluginsInfo,
    proPlugins: sbi_about.proPluginsInfo,
    stickyWidget: false,
    socialWallActivated: sbi_about.socialWallActivated,
    socialWallLinks: sbi_about.socialWallLinks,
    recommendedPlugins: sbi_about.recommendedPlugins,
    social_wall: sbi_about.social_wall,
    aboutBox: sbi_about.aboutBox,
    ajax_handler: sbi_about.ajax_handler,
    nonce: sbi_about.nonce,
    buttons: sbi_about.buttons,
    icons: sbi_about.icons,
    btnClicked: null,
    btnStatus: null,
    btnName: null,
}

var sbiAbout = new Vue({
    el: "#sbi-about",
    http: {
        emulateJSON: true,
        emulateHTTP: true
    },
    data: extensions_data,
    methods: {
        activatePlugin: function (plugin, name, index, type) {
            this.btnClicked = index + 1;
            this.btnStatus = 'loading';
            this.btnName = name;

            let data = new FormData();
            data.append('action', 'sbi_activate_addon');
            data.append('nonce', this.nonce);
            data.append('plugin', plugin);
            data.append('type', 'plugin');
            if (this.extentions_bundle && type == 'extension') {
                data.append('extensions_bundle', this.extentions_bundle);
            }
            fetch(this.ajax_handler, {
                method: "POST",
                credentials: 'same-origin',
                body: data
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success == true) {
                        if (name === 'social_wall') {
                            this.social_wall.activated = true;
                        } else if (type === 'recommended_plugin') {
                            this.recommendedPlugins[name].activated = true;
                        } else {
                            this.plugins[name].activated = true;
                        }
                        this.btnClicked = null;
                        this.btnStatus = null;
                        this.btnName = null;
                    }
                });
        },
        deactivatePlugin: function (plugin, name, index, type) {
            this.btnClicked = index + 1;
            this.btnStatus = 'loading';
            this.btnName = name;

            let data = new FormData();
            data.append('action', 'sbi_deactivate_addon');
            data.append('nonce', this.nonce);
            data.append('plugin', plugin);
            data.append('type', 'plugin');
            if (this.extentions_bundle && type == 'extension') {
                data.append('extensions_bundle', this.extentions_bundle);
            }
            fetch(this.ajax_handler, {
                method: "POST",
                credentials: 'same-origin',
                body: data
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success == true) {
                        if (name === 'social_wall') {
                            this.social_wall.activated = false;
                        } else if (type === 'recommended_plugin') {
                            this.recommendedPlugins[name].activated = false;
                        } else {
                            this.plugins[name].activated = false;
                        }
                        this.btnClicked = null;
                        this.btnName = null;
                        this.btnStatus = null;
                    }

                });
        },
        installPlugin: function (plugin, name, index, type) {
            this.btnClicked = index + 1;
            this.btnStatus = 'loading';
            this.btnName = name;

            let data = new FormData();
            data.append('action', 'sbi_install_addon');
            data.append('nonce', this.nonce);
            data.append('plugin', plugin);
            data.append('type', 'plugin');
            fetch(this.ajax_handler, {
                method: "POST",
                credentials: 'same-origin',
                body: data
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success == true) {
                        if (type === 'recommended_plugin') {
                            this.recommendedPlugins[name].installed = true;
                            this.recommendedPlugins[name].activated = true;
                        } else {
                            this.plugins[name].installed = true;
                            this.plugins[name].activated = true;
                        }
                        this.btnClicked = null;
                        this.btnName = null;
                        this.btnStatus = null;
                    }

                });
        },
        buttonIcon: function () {
            if (this.btnStatus == 'loading') {
                return this.icons.loaderSVG
            }
        },

        /**
         * Toggle Sticky Widget view
         *
         * @since 4.0
         */
        toggleStickyWidget: function () {
            this.stickyWidget = !this.stickyWidget;
        },
    }
})