/* Javascript Document */
(function($) {
	'use strict';

	$(document).ready(function(){
		$('select.grid-feature-select2').each(function(){
			add_grid_feature_select2($(this));
		});

		$(document).on('change', '#shoptimizer-gf-target', function(){
			var $target_value = $(this).val();
			var $term_elm = $('#shoptimizer-gf-term');
			var $term_wrp = $('#shoptimizer-gf-term-wrap');
			if ( 'shop' === $target_value ) {
				$term_wrp.hide();
			} else {
				$term_wrp.show();
				var $select = $term_elm.data('select');
				$term_elm.data('type', $target_value);
				$term_elm.data('placeholder', $select + ' ' + $target_value);
			}
			$term_elm.html('');
			add_grid_feature_select2($term_elm);
		});

		$(document).on('change', '#shoptimizer-gf-row', function(){
			$('#shoptimizer-gf-position').trigger('change');
		});

		$(document).on('change', '#shoptimizer-gf-position', function(){
			var $row_value = parseInt( $('#shoptimizer-gf-row').val(), 10 );
			var $position_value = parseInt( $(this).val(), 10 );
			var $col_count = parseInt( $(this).data('col-count'), 10 );

			// Save current width value before rebuilding options
			var $current_width = $('#shoptimizer-gf-width').val();

			var $max_width = $col_count - ( $position_value - 1 );
			var $width_options = '';
			var $i, $width_title;
			for ( $i = 1; $i <= $max_width; $i++ ) {
				$width_title = $i + ( $i === 1 ? ' column' : ' columns' );
				$width_options += '<option value="' + $i + '">' + $width_title + '</option>';
			}
			if ( 0 === $max_width ) {
				$width_options += '<option value="full">Full width</option>';
			}

			$('#shoptimizer-gf-width').html($width_options);

			// Restore previous width value if it's still valid
			if ( $current_width ) {
				var $current_width_int = parseInt( $current_width, 10 );
				if ( $current_width === 'full' || ( $current_width_int > 0 && $current_width_int <= $max_width ) ) {
					$('#shoptimizer-gf-width').val($current_width);
				}
			}

			update_help_text();
		});

		$(document).on('change', '#shoptimizer-gf-width', function(){
			update_help_text();
		});

		if ( $('#shoptimizer-gf-width').length > 0 ) {
			var $width_html = $('#shoptimizer-gf-width').html();
			if ( $width_html === '' ) {
				$('#shoptimizer-gf-position').trigger('change');
			}
		}
	});

	function update_help_text(){
		var $row_value = parseInt( $('#shoptimizer-gf-row').val(), 10 );
		var $position_value = parseInt( $('#shoptimizer-gf-position').val(), 10 );
		var $width_value = $('#shoptimizer-gf-width').val();
		var $row_suffix = get_ordinal_suffix( $row_value );
		var $help_text  = '';
		var $pos_text;

		if ( 'full' === $width_value ) {
			$help_text = 'This feature will appear full-width after ' + $row_value + $row_suffix + ' row of products';
		} else {
			$width_value = parseInt( $width_value, 10 );
			$pos_text = 'product ' + $position_value;
			if ( $width_value > 1 ) {
				$pos_text = 'products ' + $position_value + '-' + ( $position_value + $width_value - 1 ) ;
			}
			$help_text = 'This feature will replace ' + $pos_text + ' in row ' + $row_value;
		}
		$('#shoptimizer-gf-help').html($help_text);
	}

	function add_grid_feature_select2(obj){
		var type = obj.data('type');
		var placeholder = obj.data('placeholder');
		var nonce = $('#shoptimizer_nonce').val();
		obj.select2({
			placeholder: placeholder,
			ajax: {
				url: ajaxurl,
				dataType: 'json',
				delay: 250,
				data: function (params) {
					return {
						q: params.term,
						type: type,
						shoptimizer_nonce: nonce,
						action: 'shoptimizer_get_grid_feature_terms'
					};
				},
				processResults: function( data ) {
					var options = [];
					if ( data ) {
						$.each( data, function( index, text ) {
							options.push( { id: text[0], text: text[1] } );
						});
					}
					return {
						results: options
					};
				},
				cache: true
			},
			minimumInputLength: 1
		});
	}

	function get_ordinal_suffix( $number ) {
		if ( $number % 100 >= 11 && $number % 100 <= 13 ) {
			return 'th';
		}
		switch ( $number % 10 ) {
			case 1: return 'st';
			case 2: return 'nd';
			case 3: return 'rd';
			default: return 'th';
		}
	}

})(jQuery);
