/**
 * Renders a style-schema group’s fields, pairing padding/margin axes into BoxControl.
 */
import StyleField from './StyleField';
import {
	groupStyleFields,
	isStyleFieldShared,
	isStyleFieldVisibleAtBreakpoint,
	resolveStyleFieldType,
} from '../styleFieldDefaults';

export default function StyleFieldList( {
	fields = [],
	values = {},
	onVarChange,
	onVarsPatch,
	breakpoint = 'desktop',
} ) {
	const commit = ( field, key, value ) => {
		if ( isStyleFieldShared( field ) ) {
			onVarChange( key, value, 'desktop' );
			return;
		}
		onVarChange( key, value );
	};

	const applyPatch = ( field, patch ) => {
		if ( typeof onVarsPatch === 'function' ) {
			onVarsPatch( patch || {}, isStyleFieldShared( field ) ? 'desktop' : undefined );
			return;
		}
		Object.entries( patch || {} ).forEach( ( [ key, next ] ) => {
			commit( field, key, next );
		} );
	};

	const visible = groupStyleFields( fields ).filter( ( field ) =>
		isStyleFieldVisibleAtBreakpoint( field, breakpoint )
	);

	return visible.map( ( field ) => {
		const type = resolveStyleFieldType( field );

		if ( type === 'boxSpacing' ) {
			return (
				<StyleField
					key={ field.key }
					field={ field }
					values={ values }
					onChange={ ( patch ) => applyPatch( field, patch ) }
				/>
			);
		}

		if ( type === 'boxBorder' ) {
			return (
				<StyleField
					key={ field.key }
					field={ field }
					values={ values }
					onChange={ ( patch ) => applyPatch( field, patch ) }
				/>
			);
		}

		if ( type === 'boxRadius' ) {
			return (
				<StyleField
					key={ field.key }
					field={ field }
					values={ values }
					onChange={ ( patch ) => applyPatch( field, patch ) }
				/>
			);
		}

		if ( type === 'boxShadow' ) {
			return (
				<StyleField
					key={ field.key }
					field={ field }
					values={ values }
					onChange={ ( patch ) => applyPatch( field, patch ) }
					onVarsPatch={ ( patch ) => applyPatch( field, patch ) }
				/>
			);
		}

		if ( type === 'contentAlign' || type === 'containerAlign' ) {
			return (
				<StyleField
					key={ field.key }
					field={ field }
					value={ values[ field.key ] || field.default || 'center' }
					onChange={ ( patch ) => applyPatch( field, patch ) }
				/>
			);
		}

		if ( type === 'elementContentAlign' ) {
			return (
				<StyleField
					key={ field.key }
					field={ field }
					value={ values[ field.key ] || field.default || 'left' }
					onChange={ ( patch ) => applyPatch( field, patch ) }
				/>
			);
		}

		if (
			type === 'cssFlag' &&
			( ( field.varsOn && typeof field.varsOn === 'object' ) ||
				( field.varsOff && typeof field.varsOff === 'object' ) )
		) {
			return (
				<StyleField
					key={ field.key }
					field={ field }
					value={ values[ field.key ] || field.default || '0' }
					onChange={ ( next ) => {
						if (
							next &&
							typeof next === 'object' &&
							! Array.isArray( next )
						) {
							applyPatch( field, next );
							return;
						}
						commit( field, field.key, next );
					} }
				/>
			);
		}

		return (
			<StyleField
				key={ field.key }
				field={ field }
				value={ values[ field.key ] || '' }
				values={ values }
				onChange={ ( next ) => commit( field, field.key, next ) }
				onVarsPatch={ ( patch ) => applyPatch( field, patch ) }
			/>
		);
	} );
}
