/* global jQuery */



(function( $ ) {

	$( document ).on( 'sowsetupformfield', '.siteorigin-widget-field-type-multi-measurement', function ( e ) {

		

		var valField = $( this ).find( 'input[type="hidden"][class="siteorigin-widget-input"]' );

		var separator = valField.data( 'separator' );

		var autoFillEnabled = valField.data( 'autofill' );

		var values = valField.val() === '' ? [] : valField.val().split( separator );

		var $valInputs = $( this ).find( '.sow-multi-measurement-input' );

		var $inputContainers = $( this ).find( '.sow-multi-measurement-input-container' );

		

		var updateValue = function ( $element ) {

			var vals = valField.val() === '' ? [] : valField.val().split( separator );

			var $unitInput = $element.find( '+ .sow-multi-measurement-select-unit' );

			var index = $valInputs.index( $element );

			vals[ index ] = $element.val() + ( $element.val() === '' ? '' : $unitInput.val() );

			valField.val( vals.join( separator ) );

		};

		

		$valInputs.each( function ( index, element ) {

			if ( values.length > index ) {

				var valueResult = values[ index ].match( /(\d+\.?\d*)([a-z%]+)*/ );

				if ( valueResult && valueResult.length ) {

					var amount = valueResult[ 1 ];

					var unit = valueResult[ 2 ];

					$( element ).val( amount );

					$( element ).find( '+ .sow-multi-measurement-select-unit' ).val( unit );

				}

			} else {

				updateValue( $( element ) );

			}

		} );

		

		$inputContainers.change( function ( event ) {

			var $valInput = $( event.currentTarget ).find( '> .sow-multi-measurement-input' );

			var doAutofill = autoFillEnabled;

			if ( autoFillEnabled ) {

				$valInputs.each( function ( index, element ) {

					// Only want to autofill if it has been enabled and no other inputs have values.

					if ( $( element ).attr( 'id' ) !== $valInput.eq( 0 ).attr( 'id' ) ) {

						doAutofill = doAutofill && !( $( element ).val() );

					}

				} );

			}

			if ( doAutofill ) {

				$valInputs.each( function( index, element ) {

					$( element ).val( $valInput.val() );

					updateValue( $( element ) );

				} );

			} else {

				updateValue( $valInput );

			}

		} );

		

	} );

})( jQuery );

