'use strict';

class JetDasboardClass {

	/**
	 * [constructor description]
	 * @return {[type]} [description]
	 */
	constructor() {
		//this.JetDasboardPageInstance = false;
		this.initVueComponents();
	}

	/**
	 * [initVueComponents description]
	 * @return {[type]} [description]
	 */
	initVueComponents() {

		let _this = this;

		Vue.component( 'jet-dashboard-before-content', {
			template: '#jet-dashboard-before-content',

			props: {
				config: [ Object, Boolean ]
			},

			computed: {
				configDefined: function() {
					return this.config ? true : false;
				},

				visible: function() {
					return this.configDefined && this.config['visible'] ? true : false;
				},

				bannersList: function() {
					return this.configDefined && this.config['bannersData'] ? this.config['bannersData'] : [];
				}
			}

		} );

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

			props: {
				config: [ Object, Boolean ]
			},

			data: function() {
				return {}
			},

			computed: {
				classes: function() {
					return [
						this.licenseType ? `${ this.licenseType }-license-type` : '',
						this.productType ? `${ this.productType }-product-type` : '',
					];
				},
				configDefined: function() {
					return this.config ? true : false;
				},
				visible: function() {
					return this.configDefined && this.config['visible'] ? true : false;
				},
				licenseType: function() {
					return this.configDefined && this.config['licenseType'] ? this.config['licenseType'] : false;
				},
				productType: function() {
					return this.configDefined && this.config['productType'] ? this.config['productType'] : false;
				},
				title: function() {
					return this.configDefined && this.config['title'] ? this.config['title'] : false;
				},
				desc: function() {
					return this.configDefined && this.config['desc'] ? this.config['desc'] : false;
				},
				videoLink: function() {
					let visibleMap  = [
						'default',
						'theme-plugin-bundle',
						'single-plugin',
					];

					return this.configDefined && this.config['videoLink'] && visibleMap.includes( this.productType ) ? this.config['videoLink'] : false;
				},
			}

		} );

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

			props: {
				config: [ Object, Boolean ]
			},

			computed: {
				configDefined: function() {
					return this.config ? true : false;
				},
				visible: function() {
					return this.configDefined && this.config['visible'] ? true : false;
				},
				bannersList: function() {
					return this.configDefined && this.config['bannersData'] ? this.config['bannersData'] : [];
				}
			}

		} );

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

			props: {
				config: [ Object, Boolean ]
			},

			computed: {
				configDefined: function() {
					return this.config ? true : false;
				},
				visible: function() {
					return this.configDefined && this.config['visible'] ? true : false;
				},
				bannersList: function() {
					return this.configDefined && this.config['bannersData'] ? this.config['bannersData'] : [];
				}
			}

		} );

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

			props: {
				config: [ Object, Boolean ]
			},

			computed: {
				configDefined: function() {
					return this.config ? true : false;
				},
				visible: function() {
					return this.configDefined && this.config['visible'] ? true : false;
				},
				bannersList: function() {
					return this.configDefined && this.config['bannersData'] ? this.config['bannersData'] : [];
				}
			}

		} );

		Vue.component( 'jet-dashboard-before-sidebar', {
			template: '#jet-dashboard-before-sidebar',

			props: {
				config: [ Object, Boolean ]
			},

			computed: {
				configDefined: function() {
					return this.config ? true : false;
				},
				visible: function() {
					return this.configDefined && this.config['visible'] ? true : false;
				},
				bannersList: function() {
					return this.configDefined && this.config['bannersData'] ? this.config['bannersData'] : [];
				}
			}

		} );

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

			props: {
				config: [ Object, Boolean ],
				guide: [ Object, Boolean ],
				helpCenter: [ Object, Boolean ],
			},

			data: function() {
				return {
					themeInfo: window.JetDashboardConfig.themeInfo || false,
					videoPopupEnable: false,
					videoEmbed: false
				}
			},

			computed: {
				configDefined: function() {
					return this.config ? true : false;
				},
				visible: function() {
					return this.configDefined && this.config['visible'] ? true : false;
				},
				guideVideos: function() {
					return this.guide.videos;
				},
				guideLinks: function() {
					let rawGuideLinks = this.guide.links,
						guideLinks    = [];

					guideLinks = rawGuideLinks.map( ( linkData ) => {
						let licenseType = `${ this.$root.licenseType }-license` || 'not-activated-license',
							themeAuthor = this.$root.themeInfo.authorSlug || 'unknow-author',
							utmString = _this.getUtmParamsString( {
								utm_source: `dashboard/${ this.$root.pageModule }`,
								utm_medium: `${ licenseType }/${ themeAuthor }`,
								utm_campaign: 'guide-link',
							} );

						if ( utmString ) {
							let itemLink = linkData.link;

							linkData.link = `${ itemLink }?${ utmString }`;
						}

						return linkData;
					} );

					return guideLinks;
				},
				helpCenterLinks: function() {
					return this.helpCenter.links;
				},
				videoPopupVisible: function() {
					return this.videoPopupEnable;
				}
			},

			methods: {
				openVideoPopupHandler: function( embed ) {
					this.videoPopupEnable = true;
					this.videoEmbed = embed;
				}
			}

		} );

		Vue.component( 'jet-dashboard-after-sidebar', {
			template: '#jet-dashboard-after-sidebar',

			props: {
				config: [ Object, Boolean ]
			},

			computed: {
				configDefined: function() {
					return this.config ? true : false;
				},
				visible: function() {
					return this.configDefined && this.config['visible'] ? true : false;
				},
				bannersList: function() {
					return this.configDefined && this.config['bannersData'] ? this.config['bannersData'] : [];
				}
			}

		} );

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

			props: {
				config: [ Object, Boolean ]
			},

			data: function() {
				return {}
			},
			mounted: function(){
				if ( this.customCss ) {
					this.insertInlineStyles();
				}
				if ( this.customScript ) {
					this.insertInlineScripts();
				}
			},

			computed: {
				configDefined: function() {
					return this.config;
				},
				classes: function() {
					let classes = [
						'jet-dashboard-page__banner',
						'custom' !== this.preset ? 'premade-preset' : false,
						`${this.config['preset']}-preset`,
						this.config['size']
					];

					return classes;
				},
				visible: function() {
					return this.configDefined ? true : false;
				},
				preset: function() {
					return this.configDefined && this.config['preset'] ? this.config['preset'] : 'light';
				},
				label: function() {
					return this.configDefined && this.config['label'] ? this.config['label'] : false;
				},
				title: function() {
					return this.configDefined && this.config['title'] ? this.config['title'] : false;
				},
				content: function() {
					return this.configDefined && this.config['content'] ? this.config['content'] : false;
				},
				buttons: function() {
					return this.configDefined && this.config['buttons'] && 0 < this.config['buttons'].length ? this.config['buttons'] : false;
				},
				customHtml: function() {
					return this.configDefined && this.config['customHtml'] && '' !== this.config['customHtml'].length ? this.config['customHtml'] : false;
				},
				customCss: function() {
					return this.configDefined && this.config['customCss'] && '' !== this.config['customCss'].length ? this.config['customCss'] : false;
				},
				customScript: function() {
					return this.configDefined && this.config['customScript'] && '' !== this.config['customScript'].length ? this.config['customScript'] : false;
				},
			},

			methods: {
				generateUrmLik: function( linkData ) {
					let rawLink = linkData.link,
						licenseType = `${ this.$root.licenseType }-license` || 'not-activated-license',
						themeAuthor = this.$root.themeInfo.authorSlug || 'unknow-author',
						utmSource = linkData.hasOwnProperty( 'utmSource' ) && '' !== linkData.utmSource ? linkData.utmSource : `dashboard/${ this.$root.pageModule }`,
						utmMedium =  linkData.hasOwnProperty( 'utmMedium' ) && '' !== linkData.utmMedium ? linkData.utmMedium : `${ licenseType }/${ themeAuthor }`,
						utmCampain = linkData.hasOwnProperty( 'utmCampain' ) && '' !== linkData.utmCampain ? linkData.utmCampain : 'banner-action',
						utmString = _this.getUtmParamsString( {
							utm_source: utmSource,
							utm_medium: utmMedium,
							utm_campaign: utmCampain,
							utm_content: this.title || ''
						} );

					if ( utmString ) {
						rawLink = `${ rawLink }?${ utmString }`;