( function( $, elementorFrontend, publicConfig ) {

	'use strict';

	var JetReviews = {

		eventBus: new Vue(),

		initedInstance: [],

		captchaToken: false,

		init: function() {

			var widgets = {
				'jet-reviews.default' : JetReviews.widgetJetReviewsSimple,
				'jet-reviews-advanced.default' : JetReviews.widgetJetReviewsAdvanced,
			};

			$.each( widgets, function( widget, callback ) {
				elementorFrontend.hooks.addAction( 'frontend/element_ready/' + widget, callback );
			});

			JetReviews.defineVueComponents();
		},

		widgetJetReviewsSimple: function( $scope ) {
			var $target       = $scope.find( '.jet-review' ),
				settings      = $target.data( 'settings' ),
				$form         = $( '.jet-review__form', $target ),
				$submitButton = $( '.jet-review__form-submit', $target ),
				$removeButton = $( '.jet-review__item-remove', $target ),
				$message      = $( '.jet-review__form-message', $target ),
				$rangeControl = $( '.jet-review__form-field.type-range input', $target ),
				ajaxRequest   = null;

			$rangeControl.on( 'input', function( event ) {
				var $this         = $( this ),
					$parent       = $this.closest( '.jet-review__form-field' ),
					$currentValue = $( '.current-value', $parent ),
					value         = $this.val();

					$currentValue.html( value );
			} );

			$submitButton.on( 'click.widgetJetReviews', function() {
				addReviewHandle();

				return false;
			} );

			$removeButton.on( 'click.widgetJetReviews', function() {
				var $this = $( this );

				removeReviewHandle( $this );

				return false;
			} );

			function addReviewHandle() {
				var now            = new Date(),
					reviewTime     = now.getTime(),
					reviewDate     = new Date( reviewTime ).toLocaleString(),
					sendData       = {
						'post_id': settings['post_id'],
						'review_time': reviewTime,
						'review_date': reviewDate
					},
					serializeArray = $form.serializeObject();

				sendData = jQuery.extend( sendData, serializeArray );

				ajaxRequest = jQuery.ajax( {
					type: 'POST',
					url: window.jetReviewPublicConfig.ajax_url,
					data: {
						'action': 'jet_reviews_add_meta_review',
						'data': sendData
					},
					beforeSend: function( jqXHR, ajaxSettings ) {
						if ( null !== ajaxRequest ) {
							ajaxRequest.abort();
						}

						$submitButton.addClass( 'load-state' );
					},
					error: function( jqXHR, ajaxSettings ) {

					},
					success: function( data, textStatus, jqXHR ) {

						var responseType = data['type'],
							message      = data.message || '';

						if ( 'error' === responseType ) {
							$submitButton.removeClass( 'load-state' );
							$message.addClass( 'visible-state' );

							$( 'span', $message ).html( message );
						}

						if ( 'success' === responseType ) {
							location.reload();
						}
					}
				} );
			};

			function removeReviewHandle( $removeButton ) {
				var $reviewItem  = $removeButton.closest( '.jet-review__item' ),
					reviewUserId = $reviewItem.data( 'user-id' ),
					sendData     = {
						'post_id': settings['post_id'],
						'user_id': reviewUserId
					};

				ajaxRequest = jQuery.ajax( {
					type: 'POST',
					url: window.jetReviewPublicConfig.ajax_url,
					data: {
						'action': 'jet_reviews_remove_review',
						'data': sendData
					},
					beforeSend: function( jqXHR, ajaxSettings ) {
						if ( null !== ajaxRequest ) {
							ajaxRequest.abort();
						}

						$removeButton.addClass( 'load-state' );
					},
					error: function( jqXHR, ajaxSettings ) {

					},
					success: function( data, textStatus, jqXHR ) {
						var successType   = data.type,
							message       = data.message || '';

						if ( 'error' == successType ) {

						}

						if ( 'success' == successType ) {
							location.reload();
						}
					}
				} );
			};
		},

		widgetJetReviewsAdvanced: function( $scope ) {
			let $target    = $scope.find( '.jet-reviews-advanced' ),
				instanceId = $target.attr( 'id' ),
				options    = $target.data( 'options' ) || {};

			if ( ! $target[0] ) {
				return;
			}

			JetReviews.createJetReviewAdvancedInstance( instanceId, options );
		},

		defineVueComponents: function() {

			Vue.component( 'jet-reviews-widget-pagination', {
				template: '#jet-reviews-widget-pagination-template',
				props: {
					current: {
						type: Number,
						default: 1
					},
					total: {
						type: Number,
						default: 0
					},
					pageSize: {
						type: Number,
						default: 10
					},
					prevIcon: {
						type: String,
						default: '<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.67089 0L-5.96046e-08 6L5.67089 12L7 10.5938L2.65823 6L7 1.40625L5.67089 0Z"/></svg>'
					},
					nextIcon: {
						type: String,
						default: '<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.32911 0L7 6L1.32911 12L0 10.5938L4.34177 6L0 1.40625L1.32911 0Z"/></svg>'
					},
					customCss: {
						type: String,
						default: ''
					},
				},
				data() {
					return {
						baseClass: 'jet-reviews-widget-pagination',
						currentPage: this.current,
						currentPageSize: this.pageSize
					};
				},

				watch: {
					total ( val ) {
						let maxPage = Math.ceil( val / this.currentPageSize );

						if ( maxPage < this.currentPage ) {
							this.currentPage = ( maxPage === 0 ? 1 : maxPage );
						}
					},
					current ( val ) {
						this.currentPage = val;
					},
					pageSize ( val ) {
						this.currentPageSize = val;
					}
				},

				computed: {
					classesList() {

						let classesList = [
							this.baseClass,
						];

						if ( this.customCss ) {
							classesList.push( this.customCss );
						}

						return classesList;
					},

					prevClasses () {
						return [
							`${this.baseClass}__item`,
							`${this.baseClass}__item--prev`,
							{
								[`${this.baseClass}__item--disabled`]: this.currentPage === 1 || false
							}
						];
					},

					nextClasses () {
						return [
							`${this.baseClass}__item`,
							`${this.baseClass}__item--next`,
							{
								[`${this.baseClass}__item--disabled`]: this.currentPage === this.allPages || false
							}
						];
					},

					firstPageClasses () {
						return [
							`${this.baseClass}__item`,
							{
								[`${this.baseClass}__item--active`]: this.currentPage === 1
							}
						];
					},

					lastPageClasses () {
						return [
							`${this.baseClass}__item`,
							{
								[`${this.baseClass}__item--active`]: this.currentPage === this.allPages
							}
						];
					},

					allPages () {
						const allPage = Math.ceil( this.total / this.currentPageSize );

						return ( allPage === 0 ) ? 1 : allPage;
					},
				},
				methods: {
					changePage ( page ) {

						if ( this.currentPage !== page ) {

							this.currentPage = page;
							this.$emit( 'update:current', page );
							this.$emit( 'on-change', page );
						}
					},

					prev () {
						const current = this.currentPage;

						if ( current <= 1 ) {
							return false;
						}

						this.changePage( current - 1 );
					},

					next () {
						const current = this.currentPage;

						if ( current >= this.allPages ) {
							return false;
						}

						this.changePage(current + 1);
					},

					fastPrev () {
						const page = this.currentPage - 5;

						if ( page > 0 ) {
							this.changePage( page );
						} else {
							this.changePage( 1 );
						}
					},

					fastNext () {
						const page = this.currentPage + 5;

						if ( page > this.allPages ) {
							this.changePage( this.allPages );
						} else {
							this.changePage( page );
						}
					},
				},

			} );

			Vue.component( 'jet-advanced-reviews-form', {
				template: '#jet-advanced-reviews-form-template',

				props: {
					reviewFields: Array,
					options: Object,
				},

				data: function() {
					return ( {
						reviewSubmiting: false,
						reviewTitle: '',
						reviewContent: '',
						reviewAuthorName: '',
						reviewAuthorMail: '',
						messageText: '',
						fields: this.reviewFields
					} );