/*! ICS Calendar Pro admin scripts for Appearance settings https://icscalendar.com */

jQuery(function() {

	// Change "Match calendar color palette" setting
	jQuery('#r34ics_colors_match_theme_json').on('change', function() {
		if (jQuery(this).prop('checked') == true) {
			jQuery('#r34icspro_color_palette').val('neutral').trigger('change');
			jQuery('#r34icspro-color-palette-wrapper').hide();
			jQuery('#r34icspro-color-palette-hidden').show();
			jQuery('button#r34icspro_colors_advanced_reset').trigger('click');
		}
		else {
				jQuery('#r34icspro-color-palette-wrapper').show();
				jQuery('#r34icspro-color-palette-hidden').hide();
	}
	});
	jQuery('#r34ics_colors_match_theme_json').trigger('change');
	
	// Change "Dark mode" setting
	jQuery('#r34ics_colors_darkmode').on('change', function() {
		if (jQuery(this).prop('checked') == true) {
			jQuery('.r34icspro-example .ics-calendar').addClass('darkmode');
		}
		else {
			jQuery('.r34icspro-example .ics-calendar').removeClass('darkmode');
		}
	});
	jQuery('#r34ics_colors_darkmode').trigger('change');
	
	// Change "Base color palette" setting
	jQuery('#r34icspro_color_palette').on('change', function() {
		var palette_name = jQuery(this).val();
		var palette = r34icspro_admin_vars['palettes'][palette_name];
		var color_names = ['white', 'whitesmoke', 'gainsboro', 'darkgray', 'gray', 'dimgray', 'black'];
		// Custom palette -- swap display
		if (palette_name == 'custom') {
			jQuery('#r34icspro_color_palette_swatches_wrapper').hide();
			jQuery('#r34icspro_color_palette_custom_wrapper').show();
		}
		// Preset palette -- swap display and reset swatch values
		else {
			jQuery('#r34icspro_color_palette_swatches_wrapper').show();
			jQuery('#r34icspro_color_palette_custom_wrapper').hide();
			// Update swatches to new palette
			for (var i in color_names) {
				jQuery('#r34icspro_color_palette_swatches_wrapper .r34ics-input-color-swatch[data-css-variable="--r34ics--color--' + color_names[i] + '"]').css('background-color', palette[color_names[i]]);
			}
			// Also reset color inputs; this triggers other effects in example and custom element colors
			for (var i in color_names) {
				jQuery('#r34icspro_color_palette_' + color_names[i]).val(palette[color_names[i]]).trigger('change');
			}
		}
	});
	jQuery('#r34icspro_color_palette').trigger('change');
	
	// Initialize WP Color Picker
	jQuery('.r34ics-input-color').wpColorPicker({ palettes: r34icspro_set_iris_palette(jQuery('#r34icspro_color_palette').val()) });
	// WP Color Picker doesn't trigger change on color input field when a change is made
	jQuery('.r34ics .wp-picker-container').on('mousemove', function() {
		jQuery(this).find('input.r34ics-input-color').trigger('change');
	});
	
	// Toggle advanced color options
	jQuery('#r34icspro_colors_advanced').on('change', function() {
		if (jQuery(this).prop('checked')) {
			jQuery('#r34icspro-colors-advanced-wrapper').slideDown();
		}
		else {
			if (confirm(jQuery(this).data('confirm-text'))) {
				jQuery('#r34icspro-colors-advanced-wrapper').slideUp();
				jQuery('button#r34icspro_colors_advanced_reset').trigger('click');
			}
			else {
				jQuery(this).prop('checked', true);
				return false;
			}
		}
	});
	
	// Change individual WP Color Picker values
	jQuery('.r34ics-input-color').on('change', function() {
		// Update the example calendar
		jQuery('.ics-calendar').css(jQuery(this).data('css-variable'), jQuery(this).val());
	});
	jQuery('.r34ics-input-color').trigger('change');
		
	// Reset custom element colors to defaults
	jQuery('button#r34icspro_colors_advanced_reset').on('click', function() {
		jQuery('#r34icspro-colors-advanced-wrapper input.r34ics-input-color').val('').trigger('change');
		jQuery('#r34icspro-colors-advanced-wrapper input.r34ics-input-color').each(function() {
			// Update the example calendar
			jQuery('.ics-calendar').css(jQuery(this).data('css-variable'), jQuery(this).data('default'));
		});
		return false;
	});

	// Change font family
	jQuery('#r34icspro_font').on('change', function() {
		var font_name = jQuery(this).val();
		if (font_name == 'default' || font_name == 'system' || font_name == '') {
			jQuery('#r34ics-sample-window--typography').hide();
			// Update the example calendar
			jQuery('.r34icspro-example .ics-calendar *:not(.fc-icon)').css('font-family', '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif');
		}
		else {
			if (font_name != 'serif' && font_name != 'sans-serif' && font_name != 'monospace') {
				// @todo Put font array into a JS variable so we don't have to kludge the folder name
				var font_folder = font_name.toLowerCase().replaceAll(' ', '-');
				jQuery('head').append('<link rel="stylesheet" type="text/css" href="' + r34icspro_admin_vars['plugin_url'] + 'assets/fonts/' + font_folder + '/style.css?ver=' + r34icspro_admin_vars['version'] + '" />');
			}
			jQuery('#r34ics-sample-window--typography').css('font-family', font_name).show();
			jQuery('#r34ics-sample-window--typography--font-name').text(font_name);
			// Update the example calendar
			jQuery('.r34icspro-example .ics-calendar *:not(.fc-icon)').css('font-family', jQuery(this).val());
		}
	});
	jQuery('#r34icspro_font').trigger('change');
	
	// Change full view text scaling
	// @todo When Full view preview is present
	
	// Change table text scaling
	jQuery('#r34icspro_text_scaling_table').on('change', function() {
		// Update the example calendar
		jQuery('.r34icspro-example .ics-calendar .ics-calendar-month-grid').css('font-size', jQuery(this).val());
	});
	jQuery('#r34icspro_text_scaling_table').trigger('change');

	// Change list text scaling
	jQuery('#r34icspro_text_scaling_list').on('change', function() {
		// Update the example calendar
		jQuery('.r34icspro-example .ics-calendar .ics-calendar-basic-wrapper').css('font-size', jQuery(this).val());
	});
	jQuery('#r34icspro_text_scaling_list').trigger('change');

	// Change hyphenation
	jQuery('#r34icspro_hyphenation_off').on('change', function() {
		// Update the example calendar
		switch (jQuery(this).val()) {
			case '1':
				jQuery('.r34icspro-example .ics-calendar .event *').css('word-break', 'normal').css('hyphens', 'none');
				break;
			case '2':
				jQuery('.r34icspro-example .ics-calendar .event *').css('word-break', 'normal').css('hyphens', 'auto');
				break;
			case '0':
			default:
				jQuery('.r34icspro-example .ics-calendar .event *').css('word-break', 'break-word').css('hyphens', 'auto');
				break;
		}
	});
	jQuery('#r34icspro_hyphenation_off').trigger('change');

});
