( function( $ ) {

	'use strict';

	var JetPopupAdmin = {

		init: function() {

			JetPopupAdmin.importInit();

			if ( $( '#jet-popup-library-page')[0] ) {
				JetPopupAdmin.presetLibraryInit();
			}

			if ( $( '#jet-popup-settings-page')[0] ) {
				JetPopupAdmin.settingPageInit();
			}

		},

		importInit: function() {
			var $newPopupButton = $( '.page-title-action[href*="post-new.php?post_type=jet-popup"]' ),
				$importButton = $( '#jet-popup-import-trigger' );

			if ( ! $( '#wpbody-content .page-title-action' )[0] ) {
				return false;
			}

			$( '#wpbody-content' ).find( '.page-title-action:last' ).after( $importButton );

			$newPopupButton.on( 'click', function( event ) {
				event.preventDefault();
			} );

			var newPopupTippy = tippy( [ $newPopupButton[0] ], {
				html: document.querySelector( '#jet-popup-create-form' ),
				//appendTo: $importButton[0],
				arrow: true,
				placement: 'bottom-start',
				flipBehavior: 'clockwise',
				trigger: 'click',
				interactive: true,
				hideOnClick: true,
				theme: 'jet-popup-light'
			} );

			var importTippy = tippy( [ $importButton[0] ], {
					html: document.querySelector( '#jet-popup-import-form' ),
					//appendTo: $importButton[0],
					arrow: true,
					placement: 'bottom-start',
					flipBehavior: 'clockwise',
					trigger: 'click',
					interactive: true,
					hideOnClick: true,
					theme: 'jet-popup-light'
				}
			);
		},

		presetLibraryInit: function() {
			Vue.config.devtools = true;

			Vue.component( 'preset-list', {
				template: '#preset-list-template',

				props: {
					presets: Array
				},

				methods: {
					changePage: function( page ) {
						console.log(changePage);
					}
				}
			});

			Vue.component( 'preset-item', {
				template: '#preset-item-template',

				props: {
					presetId: Number,
					title: String,
					thumbUrl: String,
					category: Array,
					categoryNames: Array,
					install: Number,
					required: Array,
					excerpt: String,
					details: Array,
					permalink: String
				},

				data: function() {
					return {
						modalShow: false,
						requiredPluginData: window.jetPopupData.requiredPluginData
					}
				},

				computed: {
					categoryName: function() {
						var name = 'None';

						if ( 0 !== this.categoryNames.length ) {
							name = '';

							this.categoryNames.forEach( function( item, i ) {
								name += item;
							} );

							name = this.categoryNames.join( ', ' );
						}

						return name;
					},

					requiredPlugins: function() {
						var plugins            = [],
							requiredPluginData = this.requiredPluginData;

						this.required.forEach( function( item, i ) {
							if ( requiredPluginData.hasOwnProperty( item ) ) {
								plugins.push( requiredPluginData[item] );
							}
						} );

						return plugins;
					}
				},

				methods: {
					openModal: function() {
						this.modalShow = true;

						eventBus.$emit( 'openIntallPopup', this.presetId );
					},
				}
			});

			Vue.component( 'presetlibrary', {
				template: '#preset-library-template',

				data: function() {
					return ({
						spinnerShow: true,
						presetsLoaded: false,
						presetsLoadedError: false,
						categoriesLoaded: false,
						presetsData: [],
						categoryData: [],
						activeCategories: [],
						presetsLength: false,
						installPopupVisible: false,
						inactiveLicenseVisible: false,
						page: 1,
						perPage: 6,
						preset: false,
						filterBy: 'date',
						filterByOptions: [
							{
								label: 'Date',
								value: 'date'
							},
							{
								label: 'Name',
								value: 'name'
							},
							{
								label: 'Popular',
								value: 'popular'
							},
						]
					})
				},

				mounted: function() {
					var libraryPresetsUrl         = window.jetPopupData.libraryPresetsUrl,
						libraryPresetsCategoryUrl = window.jetPopupData.libraryPresetsCategoryUrl,
						categories                = [],
						presets                   = [],
						vueInstance               = this;

					axios.get( libraryPresetsUrl ).then( function ( response ) {
						var data = response.data;

						if ( data.success ) {
							for ( var preset in data.presets ) {
								var presetData = data.presets[ preset ];

								presets.push( {
									id: presetData['id'],
									title: presetData['title'],
									thumb: presetData['thumb'],
									category: presetData['category'],
									categoryNames: presetData['category_names'],
									order: presetData['order'],
									install: +presetData['install'],
									required: presetData['required'],
									excerpt: presetData['excerpt'],
									details: presetData['details'],
									permalink: presetData['permalink'],
								} );
							}

							vueInstance.presetsData = presets;
							vueInstance.spinnerShow = false;
							vueInstance.presetsLoaded = true;
						} else {
							vueInstance.spinnerShow = false;
							vueInstance.presetsLoadedError = true;
						}

					}).catch(function (error) {
						// handle error
						vueInstance.spinnerShow = false;
						vueInstance.presetsLoadedError = true;
						vueInstance.presetsData = [];
					});

					axios.get( libraryPresetsCategoryUrl ).then( function ( response ) {
						var data = response.data;

						if ( data.success ) {
							for ( var category in data.categories ) {
								categories.push( {
									id: category,
									label: data.categories[category],
									state: false
								} );
							}

							vueInstance.categoryData = categories;
						}

						vueInstance.categoriesLoaded = true;

					}).catch( function ( error ) {
						vueInstance.categoryData = [];
					});

					// Bus Events
					eventBus.$on( 'openIntallPopup', function( presetId ) {
						vueInstance.preset = presetId;

						if ( 'true' === window.jetPopupData.pluginActivated ) {
							vueInstance.installPopupVisible = true;
						} else {
							vueInstance.inactiveLicenseVisible = true;
						}

					} );
				},

				computed: {
					presetList: function() {
						var currentCategories = [],
							currentPage       = this.page,
							perPage           = this.perPage,
							filteredData      = [];

						filteredData = this.presetsData.filter( ( preset, index ) => {
							var flag = false;

							flag = this.categoryData.every( ( category ) => {
								return 'false' === category.state || false === category.state;
							} );

							for ( var category in this.categoryData ) {

								if ( 'true' === this.categoryData[category]['state']
									&& preset.category.includes( this.categoryData[category]['id'] )
								) {
									flag = true;

									break;
								}
							}

							return flag;
						} );

						this.presetsLength = filteredData.length;

						filteredData = filteredData.filter( ( preset, index ) => {
							var flag  = false,
								left  = ( currentPage - 1 ) * perPage,
								right = left + perPage;

							if ( index >= left && index < right ) {
								flag = true;
							}

							return flag;
						} );

						return filteredData;
					},

					isShowPagination: function() {
						return this.presetsLength > this.perPage;
					}
				},

				methods: {
					filterByCategory: function() {
						this.page = 1;
					},

					filterByHandler: function() {

						this.page = 1;

						switch( this.filterBy ) {
							case 'date':
								this.presetsData.sort( function ( a, b ) {

									return a.order - b.order;
								});

								break;

							case 'name':
								this.presetsData.sort( function ( a, b ) {
									var aTitle = a.title.toLowerCase(),
										bTitle = b.title.toLowerCase();

									if ( aTitle > bTitle ) {
										return 1;
									}

									if ( aTitle < bTitle ) {
										return -1;
									}

									return 0;
								});

								break;

							case 'popular':
								this.presetsData.sort( function ( a, b ) {

									return b.install - a.install;
								});