<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
// phpcs:disable WordPress.WP.I18n.MissingTranslatorsComment

// Don't load directly
if (!defined('ABSPATH')) { exit; }

global $R34ICSPro;
$licensed = $R34ICSPro->licensed();

// Must have an active license to access Appearance settings
if (!$licensed) {
	add_action('r34ics_appearance_fields_after', function() {
		?>
		<p><mark class="error">
		<?php

		printf(esc_html__('Please %1$senter a valid license%2$s to access additional appearance settings.', 'ics-calendar-pro'), '<a href="#license">', '</a>');
		?>
		</mark></p>
		<?php
	});
}

elseif (function_exists('r34ics_admin_full_access') && r34ics_admin_full_access()) {

	// Reminder: We're using get_theme_mod() instead of get_option() for legacy Customizer support
	// @todo Migrate any existing Customizer options that have changed names
	add_action('r34ics_appearance_fields_color_palette', function() {
		global $R34ICSPro, $R34ICSProCSS;

		$css_element_fields = $R34ICSProCSS->get_element_fields();
		$css_element_groups = $R34ICSProCSS->get_element_groups();
		$palette = $R34ICSProCSS->get_palette();
		?>
		<div class="r34ics-flex-wrapper">

			<div class="r34ics-flex-wide">
			
				<div id="r34icspro-color-palette-wrapper">
								
					<div class="r34ics-input r34ics-flex-wrapper">
						<label for="r34icspro_color_palette"><strong><?php esc_html_e('Base color palette:', 'ics-calendar-pro'); ?></strong></label>
						<div>
							<select name="color_palette" id="r34icspro_color_palette">
								<?php
								$options = r34icspro_array_keys_array($R34ICSPro->palettes, false);
								$current = $palette['base'] ?: 'custom';
								foreach ((array)$options as $key => $value) {
									?>
									<option value="<?php echo esc_attr($key); ?>"<?php if ($current == $key) { echo ' selected="selected"'; } ?>><?php echo wp_kses_post($R34ICSPro->palette_labels_i18n[$value] ?? $value); ?></option>
									<?php
								}
								?>
							</select>
							<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content">
								<?php
								esc_html_e('Select a palette from the menu, or select "custom palette" to adjust the individual colors by clicking on the swatches below. The examples at right will show the effects of your color selections.', 'ics-calendar-pro');
								?>
							</span></small></span>
							<div id="r34icspro_color_palette_swatches_wrapper" style="margin-top: 10px;<?php if ($current == 'custom') { echo ' display: none;'; } ?>">
								<?php
								foreach ((array)$palette['colors'] as $key => $value) {
									?>
									<span class="r34ics-input-color-swatch" data-css-variable="--r34ics--color--<?php echo esc_attr($key); ?>" style="background-color: <?php echo esc_attr($value); ?>;" title="<?php echo esc_attr('var(--r34ics--color--' . $key . ')'); ?>"></span>
									<?php
								}
								?>
							</div>
							<div id="r34icspro_color_palette_custom_wrapper" style="margin-top: 10px;<?php if ($current != 'custom') { echo ' display: none;'; } ?>">
								<?php
								foreach ((array)$palette['colors'] as $key => $value) {
									?>
									<div title="<?php esc_attr_e('CSS variable:', 'ics-calendar-pro'); echo esc_attr(' var(--r34ics--color--' . wp_kses_post($key) . ')'); ?>">
										<label for="r34icspro_color_palette_<?php echo esc_attr($key); ?>" class="screen-reader-text">
											<code class="r34ics-color-swatch" style="background-color: <?php echo esc_attr($key); ?>; color: <?php echo esc_attr(r34ics_color_text4bg($key)); ?>;">--r34ics--color--<?php echo wp_kses_post($key); ?></code>
										</label>
										<input type="text" class="r34ics-input-color" name="r34icspro_css_var[--r34ics--color--<?php echo esc_attr($key); ?>]" id="r34icspro_color_palette_<?php echo esc_attr($key); ?>" value="<?php echo esc_attr($value); ?>" data-css-variable="--r34ics--color--<?php echo esc_attr($key); ?>" />
									</div>
									<?php
								}
								?>
							</div>
						</div>
					</div>
					
					<p class="r34ics-input">
						<label for="r34icspro_colors_advanced">
							<input type="checkbox" name="colors_advanced" id="r34icspro_colors_advanced"<?php if (get_theme_mod('r34icspro_colors_advanced')) { echo ' checked="checked"'; } ?> data-confirm-text="<?php esc_attr_e('This will reset all individual element color customizations to the base color palette. Do you wish to continue?', 'ics-calendar-pro'); ?>" />
							<strong><?php esc_html_e('Customize individual element colors', 'ics-calendar-pro'); ?></strong>
							<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content">
								<?php esc_html_e('Check this box to show the full set of color customization options.', 'ics-calendar-pro'); ?>
							</span></small></span>
						</label>
					</p>
				
					<div<?php if (!get_theme_mod('r34icspro_colors_advanced')) { echo ' style="display: none;"'; } ?> id="r34icspro-colors-advanced-wrapper">
						
						<p><?php esc_html_e('Circular swatches next to each color picker indicate the default color for that element from the base color palette. Not all elements listed below are shown in the examples at right. Be sure to check the appearance of your calendars on the front end pages after saving your changes here.', 'ics-calendar-pro'); ?></p>
						
						<p><button class="button" id="r34icspro_colors_advanced_reset" onclick="return false;"><?php esc_html_e('Reset all to base color palette defaults', 'ics-calendar-pro'); ?></button></p>
						
						<?php
						foreach ((array)$css_element_groups as $group) {
							?>
							<h4><?php echo wp_kses_post($group); ?></h4>
							<?php
							foreach ((array)$css_element_fields as $key => $item) {
								if ($item['group'] != $group) { continue; }
								?>
								<div class="r34ics-input r34ics-flex-wrapper">
									<label for="r34icspro_css_var_<?php echo esc_attr($key); ?>" title="<?php esc_attr_e('CSS variable:', 'ics-calendar-pro'); echo esc_attr(' var(' . wp_kses_post($key) . ')'); ?>">
										<?php echo wp_kses_post($item['label']); ?>
									</label>
									<span>
										<input type="text" class="r34ics-input-color" name="r34icspro_css_var[<?php echo esc_attr($key); ?>]" id="r34icspro_css_var_<?php echo esc_attr($key); ?>" value="<?php echo esc_attr($item['value'] ?? ''); ?>" data-css-variable="<?php echo esc_attr($key); ?>" data-default="<?php echo esc_attr($item['default']); ?>" />
										<?php
										if (!empty($item['default']) && $item['default'] != 'inherit') {
											?>
											<span class="r34ics-input-color-swatch-wrapper ics-calendar">
												<span class="r34ics-input-color-swatch" style="background-color: <?php echo esc_attr($item['default']); ?>;" title="<?php esc_attr_e('Default value:', 'ics-calendar-pro'); echo esc_attr(' ' . $item['default']); ?>"></span>
											</span>
											<?php
										}
										if (!empty($item['description']) || $item['default'] == 'inherit') {
											?>
											<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content">
												<?php
												if (!empty($item['description'])) {
													echo wp_kses_post($item['description']);
												}
												if ($item['default'] == 'inherit') {
													if (!empty($item['description'])) { echo '<br /><br />'; }
													esc_html_e('Inherits default color from theme.', 'ics-calendar-pro');
												}
												?>
											</span></small></span>
											<?php
										}
										?>
									</span>
								</div>
								<?php
							}
						}
						?>
						
					</div>
					
				</div>
				
				<div id="r34icspro-color-palette-hidden" style="display: none;">
				
					<p><?php esc_html_e('Note: Color palette customizations are unavailable when using the "Match calendar color palette to current Block Theme colors" setting above. Theme color palette may not be reflected in the example block at right.', 'ics-calendar-pro'); ?></p>
				
				</div>
				
			</div>
			
			<div class="r34ics-flex-narrow">

				<?php include_once(plugin_dir_path(__FILE__) . 'example.php'); ?>

			</div>
					 
		</div>
		<?php
	});

	add_action('r34ics_appearance_fields_after', function() {
		global $R34ICSPro, $R34ICSProCSS;

		$fonts = $R34ICSProCSS->get_fonts();
		?>
		<div class="r34ics-inner-box">
			
			<h3><?php esc_html_e('Typography', 'ics-calendar-pro'); ?></h3>
			
			<p class="r34ics-input">
				<label for="r34icspro_font"><strong><?php esc_html_e('Font:', 'ics-calendar-pro'); ?></strong></label>
				<select name="font" id="r34icspro_font">
					<?php
					$current = get_theme_mod('r34icspro_font') ?: 'default';
					foreach ((array)$fonts as $key => $item) {
						?>
						<option value="<?php echo esc_attr($key); ?>"<?php if ($current == $key) { echo ' selected="selected"'; } ?>><?php echo wp_kses_post($item['label'] ?? $key); ?></option>
						<?php
					}
					?>
				</select>
				<span class="r34ics-sample-window" id="r34ics-sample-window--typography">
					<?php

					printf(esc_html__('This is a text sample in %1$s font.', 'ics-calendar-pro'), '<span id="r34ics-sample-window--typography--font-name"></span>');
					?>
				</span>
			</p>
		
			<p class="r34ics-input">
				<label for="r34icspro_text_scaling_full"><strong><?php esc_html_e('Full view text scaling:', 'ics-calendar-pro'); ?></strong></label>
				<select name="text_scaling_full" id="r34icspro_text_scaling_full">
					<?php
					$current = get_theme_mod('r34icspro_text_scaling_full') ?: '13px';
					$options = array(
						'8px' => '8px',
						'10px' => '10px',
						'11px' => '11px',
						'13px' => '13px ' . __('(default)', 'ics-calendar-pro'),
						'14px' => '14px',
						'16px' => '16px',
						'18px' => '18px',
						'19px' => '19px',
						'21px' => '21px',
						'22px' => '22px',
						'24px' => '24px',
						'26px' => '26px',
						'27px' => '27px',
						'29px' => '29px',
						'30px' => '30px',
						'32px' => '32px',
						'34px' => '34px',
						'35px' => '35px',
						'37px' => '37px',
						'38px' => '38px',
						'40px' => '40px',
					);
					foreach ((array)$options as $key => $value) {
						?>
						<option value="<?php echo esc_attr($key); ?>"<?php if ($current == $key) { echo ' selected="selected"'; } ?>><?php echo wp_kses_post($value); ?></option>
						<?php
					}
					?>
				</select>
				<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content"><?php esc_html_e('Adjusts base text size for Full view. Does not affect any other views. (The effect of this setting is not shown in the examples on this page.)', 'ics-calendar-pro'); ?></span></small></span>
			</p>
		
			<p class="r34ics-input">
				<label for="r34icspro_text_scaling_table"><strong><?php esc_html_e('Table text scaling:', 'ics-calendar-pro'); ?></strong></label>
				<select name="text_scaling_table" id="r34icspro_text_scaling_table">
					<?php
					// Note: r34icspro_text_scaling_grid is the old key from the pre-6.0 Customizer settings
					$current = get_theme_mod('r34icspro_text_scaling_table', get_theme_mod('r34icspro_text_scaling_grid')) ?: '100%';
					$options = array(
						'50%' => '50%',
						'60%' => '60%',
						'70%' => '70%',
						'80%' => '80%',
						'90%' => '90%',
						'100%' => '100% ' . __('(default)', 'ics-calendar-pro'),
						'110%' => '110%',
						'120%' => '120%',
						'130%' => '130%',
						'140%' => '140%',
						'150%' => '150%',
						'160%' => '160%',
						'170%' => '170%',
						'180%' => '180%',
						'190%' => '190%',
						'200%' => '200%',
						'210%' => '210%',
						'220%' => '220%',
						'230%' => '230%',
						'240%' => '240%',
						'250%' => '250%',
					);
					foreach ((array)$options as $key => $value) {
						?>
						<option value="<?php echo esc_attr($key); ?>"<?php if ($current == $key) { echo ' selected="selected"'; } ?>><?php echo wp_kses_post($value); ?></option>
						<?php
					}
					?>
				</select>
				<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content"><?php esc_html_e('Adjusts relative text size of elements in table-style layouts (e.g. month, week, widget). May have no effect on sites whose themes use exact pixel sizes for text.', 'ics-calendar-pro'); ?></span></small></span>
			</p>
		
			<p class="r34ics-input">
				<label for="r34icspro_text_scaling_list"><strong><?php esc_html_e('List text scaling:', 'ics-calendar-pro'); ?></strong></label>
				<select name="text_scaling_list" id="r34icspro_text_scaling_list">
					<?php
					$current = get_theme_mod('r34icspro_text_scaling_list') ?: '100%';
					$options = array(
						'50%' => '50%',
						'60%' => '60%',
						'70%' => '70%',
						'80%' => '80%',
						'90%' => '90%',
						'100%' => '100% ' . __('(default)', 'ics-calendar-pro'),
						'110%' => '110%',
						'120%' => '120%',
						'130%' => '130%',
						'140%' => '140%',
						'150%' => '150%',
						'160%' => '160%',
						'170%' => '170%',
						'180%' => '180%',
						'190%' => '190%',
						'200%' => '200%',
						'210%' => '210%',
						'220%' => '220%',
						'230%' => '230%',
						'240%' => '240%',
						'250%' => '250%',
					);
					foreach ((array)$options as $key => $value) {
						?>
						<option value="<?php echo esc_attr($key); ?>"<?php if ($current == $key) { echo ' selected="selected"'; } ?>><?php echo wp_kses_post($value); ?></option>
						<?php
					}
					?>
				</select>
				<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content"><?php esc_html_e('Adjusts relative text size of elements in list-style layouts. May have no effect on sites whose themes use exact pixel sizes for text.', 'ics-calendar-pro'); ?></span></small></span>
			</p>
		
			<p class="r34ics-input">
				<label for="r34icspro_hyphenation_off"><strong><?php esc_html_e('Hyphenation:', 'ics-calendar-pro'); ?></strong></label>
				<select name="hyphenation_off" id="r34icspro_hyphenation_off">
					<?php
					$current = get_theme_mod('r34icspro_hyphenation_off') ?: 0;
					$options = array(
						0 => __('Hyphenate and forced breaks ON', 'ics-calendar-pro') . ' ' . __('(default)', 'ics-calendar-pro'),
						1 => __('Hyphenate and forced breaks OFF', 'ics-calendar-pro'),
						2 => __('Hyphenate ON; forced breaks OFF', 'ics-calendar-pro'),
					);
					foreach ((array)$options as $key => $value) {
						?>
						<option value="<?php echo esc_attr($key); ?>"<?php if ($current == $key) { echo ' selected="selected"'; } ?>><?php echo wp_kses_post($value); ?></option>
						<?php
					}
					?>
				</select>
				<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content"><?php esc_html_e('By default, long words will be hyphenated, with forced breaks if needed, to prevent text overflowing small containers. Optionally you can turn off all hyphenation and forced breaks, or allow hyphenation but not forced breaks. Note: Hyphenation is not supported by some older browsers.', 'ics-calendar-pro'); ?></span></small></span>
			</p>
		
		</div>

		<div class="r34ics-inner-box">

			<h3><?php esc_html_e('Layout', 'ics-calendar-pro'); ?></h3>

			<p class="r34ics-input">
				<label for="r34icspro_hide_weekends">
					<input type="checkbox" name="hide_weekends" id="r34icspro_hide_weekends"<?php if (get_theme_mod('r34icspro_hide_weekends')) { echo ' checked="checked"'; } ?> />
					<strong><?php esc_html_e('Hide weekends', 'ics-calendar-pro'); ?></strong>
					<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content">
						<?php esc_html_e('Applies to table-style (month, week) layouts only. If checked, Saturdays and Sundays will not display in the grid. To hide weekends in Full view, use the setting in the Calendar Builder for that specific calendar.', 'ics-calendar-pro'); ?>
					</span></small></span>
				</label>
			</p>
		
			<p class="r34ics-input">
				<label for="r34icspro_legend_style"><strong><?php esc_html_e('Legend style:', 'ics-calendar-pro'); ?></strong></label>
				<select name="legend_style" id="r34icspro_legend_style">
					<?php
					$current = get_theme_mod('r34icspro_legend_style') ?: 0;
					$options = array(
						'0' => __('Show with checkboxes', 'ics-calendar-pro') . ' ' . __('(default)', 'ics-calendar-pro'),
						'1' => __('Show without checkboxes', 'ics-calendar-pro'),
						'2' => __('Hide legend', 'ics-calendar-pro'),
					);
					foreach ((array)$options as $key => $value) {
						?>
						<option value="<?php echo esc_attr($key); ?>"<?php if ($current == $key) { echo ' selected="selected"'; } ?>><?php echo wp_kses_post($value); ?></option>
						<?php
					}
					?>
				</select>
				<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content"><?php esc_html_e('Customizes appearance of the color key legend shown on calendars with multiple, color-coded feeds.', 'ics-calendar-pro'); ?></span></small></span>
			</p>
		
			<p class="r34ics-input">
				<label for="r34icspro_sticky_sidebar_top"><strong><?php esc_html_e('Sticky sidebar top offset:', 'ics-calendar-pro'); ?></strong></label>
				<select name="sticky_sidebar_top" id="r34icspro_sticky_sidebar_top">
					<?php
					$current = get_theme_mod('r34icspro_sticky_sidebar_top') ?: '5em';
					for ($i = 0; $i <= 15; $i++) {
						$key = ($i == 0) ? '0' : $i . 'em';
						$value = ($i == 5) ? $key . ' ' . __('(default)', 'ics-calendar-pro') : $key;
						?>
						<option value="<?php echo esc_attr($key); ?>"<?php if ($current == $key) { echo ' selected="selected"'; } ?>><?php echo wp_kses_post($value); ?></option>
						<?php
					}
					?>
				</select>
				<span class="description" tabindex="0"><small class="r34ics-help"><span class="help_content"><?php esc_html_e('Offset distance for sticky scrolling sidebars from top of window when scrolling.', 'ics-calendar-pro'); ?></span></small></span>
			</p>
		
		</div>

		<?php
	});

}

// Include appearance fields from free version
include_once($R34ICSPro->r34ics_path . '/templates/admin/appearance.php');
