window.TVE_Dash = window.TVE_Dash || {};
TVE_Dash.views = TVE_Dash.views || {};
( function ( $ ) {
	require( './materialize/leanModal' );
	window.Vel = require( './materialize/velocity.min' );
	require( './materialize/global' );
	require( './materialize/forms' );
	require( './util/util' );
	/**
	 * base class for modals
	 *
	 * backbone view wrapped over a modal div from materialize
	 */
	TVE_Dash.views.Modal = Backbone.View.extend( {
		className: 'tvd-modal',
		id: 'tvd-modal-base',
		/**
		 * .tvd-modal-content div reference
		 */
		$_content: '',
		/* this will be populated with data coming from params when instantiating the view / modal */
		data: {},

		/**
		 * Array of stored child views - to remove them when this view is destroyed
		 */
		$$childViews: [],

		/**
		 * Get the main modal action button. Usually, this is the "Save" button.
		 * Overwrite this if custom behaviour is needed
		 *
		 * @return {JQuery}
		 */
		getModalActionButton() {
			return this.$( '.tvd-modal-save' ).filter( ':visible' );
		},

		/**
		 * used to setup this.data field - it will set all constructor arguments into this.data so that they are available
		 *
		 * @param {Object} args
		 */
		initialize( args ) {

			this.beforeInitialize( args );

			this.data = args;
			const self = this;

			_.each( args, function ( v, k ) {

				if ( typeof self[ k ] === 'undefined' ) {
					self[ k ] = v;
				}
			} );

			this.afterInitialize( args );
		},
		/**
		 * we should not override this, use afterRender() instead
		 * this does not open the modal, it just renders it and appends it to the body tag
		 *
		 * @return {TVE_Dash.views.Modal}
		 */
		render() {
			this.$el.empty();
			this.$el.appendTo( 'body' );
			// make the whole data object available to the template
			this.data = _.extend( {
				model: this.model
			}, this.data );

			if ( typeof this.template === 'string' ) {
				this.template = TVE_Dash.tpl( this.template );
			}

			this.$el.html( this.template( this.data ) );

			if ( this.data[ 'max-width' ] ) {
				/* max-width should always be sent in % */
				this.$el.css( 'max-width', this.data[ 'max-width' ] );
			} else {
				this.$el.css( 'max-width', '' );
			}

			this.$el.css( 'max-height', this.data[ 'max-height' ] || '' );

			if ( this.data.no_close ) {
				this.$el.find( '.tvd-modal-close' ).remove();
			} else if ( ! this.$el.children( '.tvd-modal-close' ).length ) {
				this.$el.append( '<a href="javascript:void(0)" class="tvd-modal-action tvd-modal-close tvd-modal-close-x"><i class="tvd-icon-close2"></i></a>' );
			}

			if ( this.data.title ) {
				let $title = this.$el.find( 'h3.tvd-modal-title' );
				if ( ! $title.length ) {
					$title = $( '<h3 class="tvd-modal-title"></h3>' );
					this.$el.find( '.tvd-modal-content' ).prepend( $title );
				}
				$title.html( this.data.title );
			}

			if ( this.data.width ) {
				this.$el.css( 'width', this.data.width );
			}
			if ( this.data.height ) {
				this.$el.css( 'height', this.data.height + 'px' );
			}
			this.$_content = this.$el.find( '.tvd-modal-content' );

			this.afterRender();

			/**
			 * when the autocomplete opens, we need to scroll the .tvd-modal-content so that the results are visible
			 */
			this.$el.on( 'autocompleteopen', _.bind( this.autocomplete_scroll, this ) );

			this.$el.on( 'tvdpickeropen', _.bind( this.pickadate_scroll, this ) );

			return this;
		},
		/**
		 * called when a jquery autocomplete widget is opened inside a modal
		 * scrolls the modal frame to contain as much of the autocomplete element as possible
		 *
		 * @param event
		 * @param ui
		 */
		autocomplete_scroll( event ) {
			const $input = $( event.target ),
				$ul = $input.parent().find( 'ul.ui-autocomplete' ),
				ui_height = $input.outerHeight() + $ul.outerHeight(),
				ui_top = $input.offset().top,
				c_top = this.$_content.offset().top,
				delta_scroll = ui_top - c_top + this.$_content.scrollTop() - 25;

			if ( ui_height + ui_top > this.$_content.outerHeight() + c_top ) {
				this.$_content.animate( {
					scrollTop: delta_scroll
				} );
			}
		},
		/**
		 * called when a datepicker (pickadate) is opened inside this modal
		 * it scroll the modal frame so that the date picker is fully visible
		 *
		 * @param {Object} event jQuery event instance
		 * @param {Object} P Picker instance
		 */
		pickadate_scroll( event, P ) {
			const $input = $( event.target ),
				$picker = P.$root,
				picker_height = $picker.outerHeight( true ) + 40,
				picker_top = $input.offset().top - picker_height / 2,
				c_top = this.$_content.offset().top;

			if ( picker_top + picker_height > this.$_content.outerHeight() + c_top ) {
				this.$_content.animate( {
					scrollTop: picker_height + picker_top - c_top - this.$_content.outerHeight() + this.$_content.scrollTop() - 25
				} );
			} else if ( picker_top < c_top ) {
				this.$_content.animate( {
					scrollTop: this.$_content.scrollTop() - ( c_top - picker_top )
				} );
			}
		},
		/**
		 * auto-focus the first input and bind the ENTER event
		 *
		 * @param {Object} [$root] optional, jquery wrapper over a DOM element
		 */
		input_focus( $root ) {
			$root = $root || this.$el;

			const $actionButton = this.getModalActionButton();
			const $textInputs = $root.find( 'input:not(.tvd-no-focus,:checkbox,:radio,:hidden)' ).filter( ':visible' );

			/**
			 * find the first focusable text input (or textarea) or action button
			 */
			const $autoFocus = $textInputs.add( this.$( 'textarea' ) ).add( $actionButton ).filter( ':visible' ).not( '.tvd-no-focus' ).first();

			if ( $autoFocus.length ) {
				requestAnimationFrame( () => $autoFocus.first().focus().select() );
			}

			/**
			 * Setup keyup listeners on the text inputs
			 *
			 * @type {*|number|bigint|T|T|undefined}
			 */
			$textInputs.not( '.tvd-skip-modal-save' ).off( 'keyup.tvd-save' ).on( 'keyup.tvd-save', function ( e ) {
				if ( e.which === 13 ) {
					/**
					 * `requestAnimationFrame` so that any other `change` events are processed first and model validation can be correctly performed
					 */
					requestAnimationFrame( () => {
						if ( $actionButton.css( 'pointer-events' ) !== 'none' ) {
							$actionButton.trigger( 'click' );
						}
					} );

					return false;
				}
				return true;
			} );
		},
		/**
		 * triggered immediately after the rendering is completed (after the template is added to DOM) but before showing the modal
		 * override this to populate extra stuff in the view
		 */
		afterRender() {
			return this;
		},
		/**
		 * open the modal
		 * options for the modal can be sent when instantiating the view
		 *
		 * @return {TVE_Dash.Modal}
		 */
		open() {
			const self = this;

			const options = _.extend( {
				in_duration: 200,
				out_duration: 300,
				dismissible: true,
				beforeClose() {
					self.beforeClose();
				},
				ready() {
					self.onOpen.call( self );
					/**
					 * allow also 'afterOpen' callback
					 */
					if ( typeof self.afterOpen === 'function' ) {
						self.afterOpen.call( self );
					}
					if ( ! self.noMaterialize ) {
						TVE_Dash.materialize( self.$el );
					}
					self.input_focus();

					if ( typeof self.afterMaterialize === 'function' ) {
						self.afterMaterialize.call( self );
					}
				},
				complete() {
					delete TVE_Dash.opened_modal_view;
					self.$el.css( 'width', '' ).css( 'height', '' );
					self.destroy().remove();
					self.onClose.call( self );
					/**
					 * allow also 'afterClose' callback
					 */
					if ( typeof self.afterClose === 'function' ) {
						self.afterClose.call( self );
					}
				}
			}, this.data );

			this.modal_options = options;

			this.$el.openModal( options );

			TVE_Dash.opened_modal_view = this;

			return this;
		},
		close() {
			this.$el.closeModal( this.modal_options );
			return this;
		},
		/**
		 * triggered after the modal has been opened
		 */
		onOpen() {
		},
		/**
		 * triggered after the modal has been closed and the html has been removed
		 */
		onClose() {
		},
		/**
		 * triggered before the modal has been closed and the html has been removed
		 */
		beforeClose() {
		},
		/**
		 * show a preloader over this modal
		 */
		showLoader() {
			let _loader = this.$( '.tvd-modal-preloader-wrapper' );
			if ( ! _loader.length ) {
				_loader = $( TVE_Dash.tpl( 'modal-loader', {} ) );
				this.$el.append( _loader );
			}

			_loader.find( '.tvd-modal-preloader' ).css( {
				top: ( this.$el.outerHeight() / 2 ) + 'px'
			} );

			/* we do this to avoid calling the loader multiple times */
			requestAnimationFrame( () => {
				if ( ! this.isLoading ) {
					_loader.fadeIn( 300 );
					this.isLoading = true;
				}
			} );

			this.$el.addClass( 'tvd-modal-disable' );

			return this;
		},
		/**
		 * hide the preloader
		 */
		hideLoader() {
			this.$el.removeClass( 'tvd-modal-disable' );
			requestAnimationFrame( () => this.$( '.tvd-modal-preloader-wrapper' ).fadeOut( 300 ) );
			this.isLoading = false;

			return this;
		},
		/**
		 * set the loading state on a button
		 *
		 * @param $btn
		 * @return {*}
		 */
		btnLoading( $btn ) {
			return jQuery( $btn ).addClass( 'tvd-disabled' ).prop( 'disabled', true );
		},
		beforeInitialize() {
			return this;
		},
		afterInitialize() {
			return this;
		},
		/**
		 * Add one or more child view reference. Can receive any number of arguments
		 *
		 * @param {Backbone.View|Backbone.View[]} views
		 *
		 * @return {Backbone.View} the caller view
		 */
		addChild( ...views ) {
			if ( Array.isArray( views[ 0 ] ) ) {
				views = views[ 0 ];
			}
			this.$$childViews = this.$$childViews.concat( views );

			return this;
		},
		/**
		 * Completely destroy the view and un-delegate any events
		 */
		destroy() {
			this.stopListening();
			this.undelegateEvents();
			this.$el.removeData().off();

			this.$$childViews.filter( i => i ).forEach( view => {
				if ( typeof view?.destroy === 'function' ) {
					view.destroy();
				}
			} );

			return this;
		}
	} );

	$( document ).ready( function () {
		if ( ! TVE_Dash.views.VideoModal ) {
			TVE_Dash.views.VideoModal = TVE_Dash.views.Modal.extend( {
				template: TVE_Dash.tpl( 'modal-video-modal' ),
				className: 'tvd-modal video-container',

				initialize( options ) {
					this.source = options.source;
				},

				afterRender() {
					this.$el.find( 'iframe' ).attr( 'src', `https://www.youtube.com/embed/${this.source}` );
				},

			} );

			$( 'body' ).on( 'click', '.tvd-open-video', function ( e ) {
				let $target = $( e.target );
				if ( ! $target.hasClass( 'tvd-open-video' ) ) {
					$target = $target.parents( '.tvd-open-video' );
				}
				TVE_Dash.modal( TVE_Dash.views.VideoModal, {
					'max-width': '80%',
					source: $target.attr( 'data-source' ),
				} );
			} );
		}


	} );
} )( jQuery );