( ( $ ) => {
	$( () => {
		const $main = new ( Backbone.View.extend( {
				el: '.cs-content',
				events: {
					'click .tvd-toggle-input': 'switchToggle',
					'click .add-new-page': 'createNewPage',
					'click .enable-state': function ( event ) {
						this.enableState( event.target.getAttribute( 'data-enable' ) );

						if ( event.target.classList.contains( 'remove-page' ) ) {
							this.activateComingSoon( 0 );
							/* Clear selected value from dropdown */
							$( '.page-source-select' ).val( null ).trigger( 'change' );
						}
					}
				},
				initialize() {
					if ( parseInt( TVD_CS_CONST.is_coming_soon_enabled ) !== 0 ) {
						this.enableState( 'view' );
					}
				},
				initializeDropdown() {
					$( '.page-source-select' ).select2( {
						ajax: {
							url: TVD_CS_CONST.baseUrl,
							dataType: 'json',
							delay: 250,
							data: ( params ) => {
								return {
									search: params.term,
									status: 'publish',
									type: 'page'
								}
							},
							processResults: ( data ) => {
								return {
									results: data,
								}
							},
						},
						placeholder: 'Search an existing page',
						templateResult: ( page ) => {
							if ( page.loading ) {
								return page.text;
							}
							if ( page.title ) {
								return $( TVE_Dash.tpl( 'coming-soon-views-dropdown-result', {pageTitle: page.title.rendered} ) );
							}
						},
						templateSelection: ( page ) => {
							return page.text || page.title.rendered;
						},
						multiple: true,
						minimumInputLength: 3,
						language: {
							inputTooShort: () => ''
						},
					} ).on( 'select2:select', ( event ) => {
						this.initializePageVariables( event.params.data );
						this.enableState( 'inactive' );
						this.enableLoader();
						this.activateComingSoon( event.params.data.id );
					} );
				},
				createNewPage() {
					const newPageTitle = $( '#new-page-title' ).val();
					if ( ! newPageTitle ) {
						TVE_Dash.err( 'Please add the page title!' );
					} else {
						this.enableLoader();
						$.ajax( {
							method: 'POST',
							url: TVD_CS_CONST.baseUrl,
							data: {
								title: newPageTitle,
								type: 'page',
								status: 'publish',
							},
							beforeSend: ( xhr ) => {
								xhr.setRequestHeader( 'X-WP-Nonce', TVD_CS_CONST.nonce );
							},
							success: ( response ) => {
								this.initializePageVariables( response );
								this.activateComingSoon( response.id );
							}
						} )
					}
				},
				activateComingSoon( pageID ) {
					$.ajax( {
						url: ajaxurl,
						dataType: 'json',
						type: 'POST',
						data: {
							_wpnonce: TVE_Dash_Const.nonce,
							action: TVE_Dash_Const.actions.backend_ajax,
							route: TVE_Dash_Const.routes.settings,
							field: 'tvd_coming_soon_page_id',
							value: pageID,
						}
					} ).done( ( response ) => {
						if ( pageID !== 0 ) {
							this.enableState( 'view' )
						}
						$( '#wp-admin-bar-coming-soon' ).toggle( pageID !== 0 );
						if ( TVE_Dash.page_loader ) {
							TVE_Dash.page_loader.close();
						}
						TVE_Dash.success( 'Changes saved successfully' );
					} );
				},
				switchToggle() {
					if ( this.$( '.tvd-toggle-input' )[ 0 ].checked ) {
						this.enableState( 'search' );

					} else {
						this.activateComingSoon( 0 );
						this.enableState( 'inactive' );
					}
				},
				enableState( state ) {
					if ( state !== 'inactive' ) {
						const tplVariables = {
							pageName: TVD_CS_CONST.page_name,
							editUrl: TVD_CS_CONST.edit_url,
							previewUrl: TVD_CS_CONST.preview_url
						};
						this.$el.find( '.tvd-cs-page-selector' ).html( TVE_Dash.tpl( `coming-soon-views-${state}`, state === 'view' ? tplVariables : {} ) );

						if ( state === 'search' ) {
							this.initializeDropdown();
						}
					} else {
						this.$el.find( '.tvd-cs-page-selector' ).empty();
					}
				},
				initializePageVariables( data ) {
					TVD_CS_CONST.page_name = data.title.rendered;
					TVD_CS_CONST.preview_url = data.link;
					const url = new URL( TVD_CS_CONST.base_url + 'post.php' );
					url.searchParams.append( 'post', data.id );
					url.searchParams.append( 'action', 'architect' );
					url.searchParams.append( 'tve', 'true' );
					TVD_CS_CONST.edit_url = url;
				},
				enableLoader() {
					TVE_Dash.page_loader = new TVE_Dash.views.PageLoader();
					TVE_Dash.page_loader.render();
					TVE_Dash.page_loader.open();
				},
			} ) )
		;
		$main.render();
	} )
} )( jQuery );
