import License from './License';
import Checkbox from './Checkbox';
import TrackingTest from './TrackingTest';
import Email from './Email';
import Password from './Password';
import Plugins from './Plugins';
import AnonymousUsageData from './AnonymousUsageData';
import Radio from './Radio';
import { ErrorBoundary } from '../ErrorBoundary';
import useOnboardingStore from '@/store/useOnboardingStore';

/**
 * Fields component that renders different field types based on the field configuration
 *
 * @param {Object}   props          Component props
 * @param {Array}    props.fields   Array of field configurations
 * @param {Function} props.onChange Callback function when field values change
 * @return {JSX.Element|null} The rendered fields or null if no fields
 */
const Fields = ( { fields, onChange } ) => {
	const { getValue, setValue, isEdited } = useOnboardingStore();
	if ( ! fields ) return null;

	const fieldComponents = {
		license: License,
		checkbox: Checkbox,
		tracking_test: TrackingTest,
		email: Email,
		plugins: Plugins,
		password: Password,
		anonymous_usage_data: AnonymousUsageData,
		radio: Radio,
	};

	//the settings contain the values.
	return (
		<ErrorBoundary>
			{ fields.map( ( field ) => {
				let value = getValue( field.id );
				const isEditedField = isEdited( field.id );
				if (
					! isEditedField &&
					( value === '' ||
						value === undefined ||
						value === false ) &&
					field.default
				) {
					setValue( field.id, field.default );
					value = field.default;
				}
				const Component = fieldComponents[ field.type ] || null;
				return Component ? (
					<Component
						key={ field.id }
						field={ field }
						onChange={ ( value ) => onChange( field.id, value ) }
						value={ value }
					/>
				) : null;
			} ) }
		</ErrorBoundary>
	);
};

export default Fields;
