/**
 * Convert a settings object into the same CSS custom properties emitted on the front-end.
 * Mirrors wuppi_settings_to_css_vars() in PHP.
 */
import { RADIUS_PRESETS, TRANSITION_PRESETS, PADDING_PRESETS } from './field-defs';

const palette = ( slot ) => `var(--wp--preset--color--${ slot })`;

export function settingsToCssVars( settings, { device = 'desktop' } = {} ) {
	const globalRadius = RADIUS_PRESETS[ settings.radius_preset ] ?? 8;
	const btnRadius = settings.btn_radius_use_global
		? globalRadius
		: ( RADIUS_PRESETS[ settings.btn_radius_preset ] ?? globalRadius );
	const imageRadius = settings.radius_image_override
		? Number( settings.radius_image )
		: globalRadius;
	const cardRadius = settings.radius_card_override
		? Number( settings.radius_card )
		: globalRadius;
	const inputRadius = settings.radius_input_override
		? Number( settings.radius_input )
		: Math.max( 0, globalRadius - 2 );

	const transition = TRANSITION_PRESETS[ settings.transition_speed ] ?? '0.2s';

	const alpha = Math.max( 0, Math.min( 100, Number( settings.shadow_intensity ) || 0 ) ) / 100;
	const shadowValue = settings.shadow_enabled
		? `0 10px 15px -3px rgba(0,0,0,${ alpha.toFixed( 3 ) }), 0 4px 6px -4px rgba(0,0,0,${ ( alpha * 0.6 ).toFixed( 3 ) })`
		: 'none';

	const navFontSize = settings.header_nav_density === 'comfortable' ? '1.1875rem' : '1.125rem';
	const padding = PADDING_PRESETS[ settings.btn_padding_preset ] ?? PADDING_PRESETS.normal;

	return {
		'--wuppi-preview-back-to-top': settings.back_to_top ? 'block' : 'none',
		'--wuppi-btt-radius': settings.back_to_top_shape === 'button' ? `var(--wuppi-btn-radius)` : '50%',

		'--calm-header-height': `${ settings.header_height }px`,
		'--calm-nav-gap': `${ settings.header_nav_gap }px`,
		'--calm-nav-font-size': navFontSize,
		'--wuppi-nav-font-weight': String( settings.nav_font_weight ),
		'--wuppi-nav-hover-mark-w': settings.nav_hover_underline ? '100%' : '0px',
		'--wuppi-nav-hover-mark-h': settings.nav_hover_underline ? '2px' : '0px',
		'--wuppi-nav-active-bg': settings.nav_active_indicator === 'background' ? 'var(--wp--preset--color--muted)' : 'transparent',
		'--wuppi-nav-active-bg-radius': settings.nav_active_indicator === 'background' ? 'var(--wuppi-radius)' : '0',
		'--wuppi-nav-active-padding': settings.nav_active_indicator === 'background' ? '0.5em' : '0px',
		'--wuppi-nav-mark-w': settings.nav_active_indicator === 'underline' ? '100%' : settings.nav_active_indicator === 'dot' ? '6px' : '0px',
		'--wuppi-nav-mark-h': settings.nav_active_indicator === 'underline' ? '2px' : settings.nav_active_indicator === 'dot' ? '6px' : '0px',
		'--wuppi-nav-mark-bottom': settings.nav_active_indicator === 'dot' ? '-4px' : '0px',
		'--wuppi-nav-mark-left': settings.nav_active_indicator === 'dot' ? '50%' : '0px',
		'--wuppi-nav-mark-r': settings.nav_active_indicator === 'dot' ? '999px' : '1px',
		'--wuppi-nav-mark-x': settings.nav_active_indicator === 'dot' ? '-50%' : '0%',

		'--wuppi-btn-radius': `${ btnRadius }px`,
		'--wuppi-btn-padding-y': padding.y,
		'--wuppi-btn-padding-x': padding.x,
		'--wuppi-btn-font-weight': String( settings.btn_font_weight ),
		'--wuppi-btn-hover-bg': palette( settings.btn_hover_bg ),
		'--wuppi-btn-hover-color': palette( settings.btn_hover_color ),
		'--wuppi-btn-outline-hover-bg': palette( settings.btn_outline_hover_bg ),
		'--wuppi-btn-outline-hover-color': palette( settings.btn_outline_hover_color ),
		'--wuppi-btn-outline-hover-border': palette( settings.btn_outline_hover_border ),

		'--wuppi-radius': `${ globalRadius }px`,
		'--wuppi-image-radius': `${ imageRadius }px`,
		'--wuppi-card-radius': `${ cardRadius }px`,
		'--wuppi-input-radius': `${ inputRadius }px`,
		'--calm-radius': `${ globalRadius }px`,

		'--wuppi-shadow-soft': shadowValue,
		'--wuppi-shadow-cards': settings.shadow_on_cards && settings.shadow_enabled ? 'var(--wuppi-shadow-soft)' : 'none',
		'--wuppi-shadow-images': settings.shadow_on_images && settings.shadow_enabled ? 'var(--wuppi-shadow-soft)' : 'none',
		'--wuppi-shadow-buttons': settings.shadow_on_buttons && settings.shadow_enabled && ! settings.shadow_on_buttons_hover_only ? 'var(--wuppi-shadow-soft)' : 'none',
		'--wuppi-shadow-buttons-hover': settings.shadow_on_buttons && settings.shadow_enabled ? 'var(--wuppi-shadow-soft)' : 'none',

		'--wuppi-transition-speed': transition,

		'--wuppi-heading-line-height': String( settings.heading_line_height ),
		'--wuppi-heading-letter-spacing': `${ settings.heading_letter_spacing }em`,
		'--wuppi-body-line-height': String( settings.body_line_height ),

		'--wuppi-input-focus-color': palette( settings.input_focus_color ),
		'--wuppi-input-focus-outline': 'none',
		'--wuppi-input-focus-shadow': settings.input_focus_style === 'shadow'
			? '0 8px 20px -4px rgba(0,0,0,.18),0 3px 8px -2px rgba(0,0,0,.1)'
			: ( settings.input_focus_style === 'glow'
				? '0 0 12px 4px color-mix(in srgb,var(--wuppi-input-focus-color) 25%,transparent)'
				: '0 0 0 2px color-mix(in srgb,var(--wuppi-input-focus-color) 30%,transparent)' ),

		...( device === 'mobile' && { '--wuppi-content-padding-inline': `${ settings.mobile_content_padding }px` } ),
	};
}
