(function ($) {
	$( window ).on( 'elementor/frontend/init', () => {
		class ToggleWidget extends elementorModules.frontend.handlers.Base {
			getDefaultSettings() {
				return {
					selectors: {
						container: '.pp-toggle-container',
						switchContainer: '.pp-toggle-switch-container',
						toggleSwitch: '.pp-toggle-switch',
						labelPrimary: '.pp-primary-toggle-label',
						labelSecondary: '.pp-secondary-toggle-label',
						sectionPrimary: '.pp-toggle-section-primary',
						sectionSecondary: '.pp-toggle-section-secondary',
					},
				};
			}

			getDefaultElements() {
				const selectors = this.getSettings( 'selectors' );
				return {
					$container: this.$element.find( selectors.container ),
					$switchContainer: this.$element.find( selectors.switchContainer ),
					$toggleSwitch: this.$element.find( selectors.toggleSwitch ),
					$labelPrimary: this.$element.find( selectors.labelPrimary ),
					$labelSecondary: this.$element.find( selectors.labelSecondary ),
					$sectionPrimary: this.$element.find( selectors.sectionPrimary ),
					$sectionSecondary: this.$element.find( selectors.sectionSecondary ),
				};
			}

			bindEvents() {
				this.initToggle();
				this.applyUrlState();
			}

			initToggle() {
				// Label Click
				this.onToggleClick();

				// Primary Label Click
				this.onPrimaryLabelClick();

				// Secondary Label Click
				this.onSecondaryLabelClick();
			}

			setAriaChecked( isSecondary ) {
				this.elements.$toggleSwitch.attr( 'aria-checked', isSecondary ? 'true' : 'false' );
			}

			setStatePrimary() {
				this.elements.$toggleSwitch.prop('checked', false);
				this.setAriaChecked( false );
				this.elements.$switchContainer.removeClass('pp-toggle-switch-on');
				this.elements.$labelPrimary.addClass('pp-toggle-active');
				this.elements.$labelSecondary.removeClass('pp-toggle-active');
				this.elements.$sectionPrimary.show();
				this.elements.$sectionSecondary.hide();
			}

			setStateSecondary() {
				this.elements.$toggleSwitch.prop('checked', true);
				this.setAriaChecked( true );
				this.elements.$switchContainer.addClass('pp-toggle-switch-on');
				this.elements.$labelSecondary.addClass('pp-toggle-active');
				this.elements.$labelPrimary.removeClass('pp-toggle-active');
				this.elements.$sectionSecondary.show();
				this.elements.$sectionPrimary.hide();
			}

			getUrlParamConfig() {
				const $container = this.elements.$container.first();
				const name = $container.attr('data-url-param');
				if ( ! name ) {
					return null;
				}
				return {
					name: name,
					primary: $container.attr('data-url-param-primary') || 'primary',
					secondary: $container.attr('data-url-param-secondary') || 'secondary',
					updateUrl: 'yes' === $container.attr('data-update-url'),
				};
			}

			applyUrlState() {
				const config = this.getUrlParamConfig();
				if ( ! config || 'undefined' === typeof URLSearchParams ) {
					return;
				}

				const value = new URLSearchParams( window.location.search ).get( config.name );
				if ( null === value ) {
					return;
				}

				if ( value === config.secondary && ! this.elements.$labelSecondary.hasClass('pp-toggle-active') ) {
					this.setStateSecondary();
				} else if ( value === config.primary && ! this.elements.$labelPrimary.hasClass('pp-toggle-active') ) {
					this.setStatePrimary();
				}
			}

			updateUrlState( isSecondary ) {
				const config = this.getUrlParamConfig();
				if ( ! config || ! config.updateUrl || ! window.history || ! window.history.replaceState ) {
					return;
				}
				const url = new URL( window.location.href );
				url.searchParams.set( config.name, isSecondary ? config.secondary : config.primary );
				window.history.replaceState( {}, '', url.toString() );
			}

			onToggleClick() {
				let self = this;

				this.elements.$toggleSwitch.on('click', function() {
					self.elements.$sectionPrimary.toggle(0, 'swing', function() {
						self.elements.$switchContainer.toggleClass('pp-toggle-switch-on');
					});
					self.elements.$sectionSecondary.toggle();

					self.elements.$toggleSwitch.prop('checked', false);
					let isSecondary;
					if ( self.elements.$labelPrimary.hasClass('pp-toggle-active') ) {
						self.elements.$labelPrimary.removeClass('pp-toggle-active');
						self.elements.$labelSecondary.addClass('pp-toggle-active');
						isSecondary = true;
					} else {
						self.elements.$labelPrimary.addClass('pp-toggle-active');
						self.elements.$labelSecondary.removeClass('pp-toggle-active');
						isSecondary = false;
					}
					self.setAriaChecked( isSecondary );
					self.updateUrlState( isSecondary );

					if ( self.elements.$sectionPrimary.is(":visible") ) {
						$(document).trigger('ppe-toggle-switched', [ self.elements.$sectionPrimary ]);
					} else {
						$(document).trigger('ppe-toggle-switched', [ self.elements.$sectionSecondary ]);
					}
				});
			}

			onPrimaryLabelClick() {
				let self = this;

				this.elements.$labelPrimary.on('click', function() {
					self.setStatePrimary();
					self.updateUrlState( false );

					$(document).trigger('ppe-toggle-switched', [ self.elements.$sectionPrimary ]);
				});
			}

			onSecondaryLabelClick() {
				let self = this;

				this.elements.$labelSecondary.on('click', function() {
					self.setStateSecondary();
					self.updateUrlState( true );

					$(document).trigger('ppe-toggle-switched', [ self.elements.$sectionSecondary ]);
				});
			}
		}

		elementorFrontend.elementsHandler.attachHandler( 'pp-toggle', ToggleWidget );
	} );
})(jQuery);