( function () {

	'use strict';

	Vue.component( 'plugin-item-registered', {
		template: '#jet-dashboard-plugin-item-registered',

		props: {
			pluginData: Object,
		},

		data: function() {
			return {
				usefulLinksToggle: false
			}
		},

		computed: {

			itemClass: function() {
				return [
					'plugin-item',
					'plugin-item--registered',
					this.dropdownVisible ? 'dropdown-visible' : ''
				];
			},

			usefulLinksEmpty: function() {
				return 0 === this.pluginData.usefulLinks.length;
			},

			mainLinkItem: function() {

				if ( ! this.usefulLinksEmpty ) {
					let firstItem = this.pluginData.usefulLinks[0];

					return {
						'url': firstItem.url,
						'label': firstItem.label,
						'target': firstItem.target,
					};
				}

				return {
					'url': this.pluginData.docs,
					'label': __( 'Go to docs', 'jet-dashboard' ),
					'target': '_blank'
				};
			},

			dropdownLinkItems: function() {
				let usefulLinks = this.pluginData.usefulLinks;

				return usefulLinks;
			},

			dropdownAvaliable: function() {
				return 1 < this.dropdownLinkItems.length;
			},

			dropdownVisible: function() {
				return this.usefulLinksToggle && 1 < this.dropdownLinkItems.length;
			},
		},

		methods: {
			mouseoverHandle: function() {
				this.usefulLinksToggle = true;
			},

			mouseleaveHandle: function() {
				this.usefulLinksToggle = false;
			},
		}
	} );

	Vue.component( 'offers-item', {
		template: '#jet-dashboard-offers-item',

		props: {
			config: Object,
		},

		data: function() {
			return {}
		},

		computed: {
			itemClass: function() {
				return [
					'offers-item',
				];
			},
			configDefined: function() {
				return this.config;
			},
			logo: function() {
				return this.configDefined && this.config['logo'] ? this.config['logo'] : false;
			},
			name: function() {
				return this.configDefined && this.config['name'] ? this.config['name'] : false;
			},
			desc: function() {
				return this.configDefined && this.config['desc'] ? this.config['desc'] : false;
			},
			actionConfig: function() {
				return this.configDefined && this.config['actionUrl'] && this.config['actionLabel'] ? {
					url: this.config['actionUrl'],
					label: this.config['actionLabel']
				} : false;
			},
		},
	} );

	Vue.component( 'extras-item', {
		template: '#jet-dashboard-extras-item',

		props: {
			config: Object,
		},

		data: function() {
			return {
				adminUrl: window.JetDashboardConfig.adminUrl || '#',
				userPlugins: window.JetDashboardConfig.userPlugins || {},
			}
		},

		computed: {
			itemClass: function() {
				return [
					'extras-item',
				];
			},
			configDefined: function() {
				return this.config || false;
			},
			logo: function() {
				return this.configDefined && this.config['logo'] ? this.config['logo'] : false;
			},
			name: function() {
				return this.configDefined && this.config['name'] ? this.config['name'] : false;
			},
			desc: function() {
				return this.configDefined && this.config['desc'] ? this.config['desc'] : false;
			},
			actionType: function() {
				return this.configDefined && this.config['actionType'] ? this.config['actionType'] : 'external';
			},
			requirementPlugin: function() {
				return this.configDefined && this.config['requirementPlugin'] ? this.config['requirementPlugin'] : false;
			},
			actionConfig: function() {
				let actionConfig = false;

				switch( this.actionType ) {

					case 'external':
						actionConfig = this.configDefined && this.config['externalUrl'] && this.config['externalLabel'] ? {
							url: this.config['externalUrl'],
							label: this.config['externalLabel'],
							target: '_blank'
						} : false;
					break;

					case 'dashboard':

						if ( this.requirementPlugin && this.userPlugins.hasOwnProperty( this.requirementPlugin ) && this.userPlugins[ this.requirementPlugin ].isActivated ) {
							actionConfig = this.configDefined && this.config['dashboardUrl'] && this.config['dashboardLabel'] ? {
								url: this.adminUrl + this.config['dashboardUrl'],
								label: this.config['dashboardLabel'],
								target: '_self'
							} : false;
						} else {
							actionConfig = this.configDefined && this.config['externalUrl'] && this.config['externalLabel'] ? {
								url: this.config['externalUrl'],
								label: this.config['externalLabel'],
								target: '_blank'
							} : false;
						}
					break;
				}

				return actionConfig;
			},
		},
	} );

	Vue.component( 'welcome-page', {

		template: '#jet-dashboard-welcome-page',

		props: {
			subpage: [ String, Boolean ]
		},

		data: function() {
			return {
				proccesingState: false,
				allJetPlugins: window.JetDashboardConfig.allJetPlugins || {},
				licenseList: window.JetDashboardConfig.licenseList || [],
				avaliableBanners: window.JetDashboardConfig.avaliableBanners || [],
				offersConfig: window.JetDashboardConfig.offersConfig || [],
				extrasConfig: window.JetDashboardConfig.extrasConfig || [],
				generalConfig: window.JetDashboardConfig.generalConfig || [],
				crocoWizardData: window.JetDashboardConfig.crocoWizardData || false,
				themeInfo: window.JetDashboardConfig.themeInfo || false,
				actionPlugin: false,
				actionPluginRequest: null,
				actionPluginProcessed: false,
			};
		},

		computed: {
			innerComponentConfig: function() {
				let innerComponentConfig = this.$root.pageConfig['inner-component'] || false,
					bannersData          = this.$root.getBannerListForArea( innerComponentConfig );

					innerComponentConfig = Object.assign( innerComponentConfig, {
						bannersData: bannersData
					} );

				return innerComponentConfig;
			},

			isLicenseActivated: function() {
				return 0 !== this.licenseList.length;
			},

			licencePluginList: function() {
				let licencePluginList = {};

				for ( let licence of this.licenseList ) {
					let plugins = licence['licenseDetails']['plugins'];

					for ( let plugin in plugins ) {

						let pluginData = plugins[ plugin ];
						let pluginSlug = pluginData.slug;

						if ( ! licencePluginList.hasOwnProperty( plugin ) ) {

							licencePluginList[ plugin ] = pluginData;
						}
					}
				}

				return licencePluginList;
			},

			registeredPluginList: function() {
				let registeredPluginList = {};

				for ( let pluginSlug in this.allJetPlugins ) {

					if ( this.allJetPlugins[ pluginSlug ][ 'isInstalled' ]
						&& this.allJetPlugins[ pluginSlug ][ 'isActivated' ]
					) {
						registeredPluginList[ pluginSlug ] = this.allJetPlugins[ pluginSlug ];
					}
				}

				return registeredPluginList;
			},

			avaliablePluginList: function() {

				let avaliablePluginList = {};

				for ( let pluginSlug in this.allJetPlugins ) {

					if ( ( ! this.allJetPlugins[ pluginSlug ]['isInstalled'] )
						&& this.licencePluginList.hasOwnProperty( pluginSlug )
					) {
						let pluginData = this.allJetPlugins[ pluginSlug ];

						avaliablePluginList[ pluginSlug ] = pluginData;
					}
				}

				return avaliablePluginList;
			},

			avaliablePluginCount: function() {
				return Object.keys( this.avaliablePluginList ).length;
			},

			morePluginList: function() {

				let morePluginList = {};

				for ( let pluginSlug in this.allJetPlugins ) {

					if ( ( ! this.allJetPlugins[ pluginSlug ]['isInstalled'] ) &&
						( ! this.licencePluginList.hasOwnProperty( pluginSlug ) ) ) {

						let pluginData = this.allJetPlugins[ pluginSlug ];

						morePluginList[ pluginSlug ] = pluginData;
					}
				}

				return morePluginList;
			},

			morePluginsVisible: function() {
				return 0 !== Object.keys( this.morePluginList ).length;
			},

			updatePluginList: function() {
				let updatePluginList = {};

				for ( let pluginSlug in this.registeredPluginList ) {

					if ( this.registeredPluginList[ pluginSlug ][ 'updateAvaliable' ] ) {

						updatePluginList[ pluginSlug ] = this.registeredPluginList[ pluginSlug ];
					}
				}

				return updatePluginList;
			},

			updatePluginCount: function() {
				return Object.keys( this.updatePluginList ).length;
			},

			updatesMessage: function() {
				let updateMessage    = sprintf( _n( 'You can update <b>%s plugin</b>', 'You can update <b>%s plugins</b>', this.updatePluginCount, 'jet-dashboard' ), this.updatePluginCount ),
					noUpdatesMessage = __( 'All plugins updated', 'jet-dashboard' ),
					message          = ( 0 === this.updatePluginCount ) ? noUpdatesMessage : updateMessage;

				if ( ! this.isLicenseActivated ) {
					message = __( 'Activate license to update your JetPlugins', 'jet-dashboard' );
				}

				return message;
			},

			avaliableToInstallMessage: function() {
				let avaliableMessage    = sprintf( _n( 'You can install <b>%s more Plugin</b> with your licence', 'You can install <b>%s more Plugins</b>  with your licence', this.avaliablePluginCount, 'jet-dashboard' ), this.avaliablePluginCount ),
					noAvaliableMessage = __( 'All available plugins are already installed', 'jet-dashboard' );

				return 0 === this.avaliablePluginCount ? noAvaliableMessage : avaliableMessage;
			},