import Toggle from './Toggle';

/**
 * Renders settings sections declared by add-ons in PHP (EDFW_Helper::settings_schema).
 *
 * Add-ons get their fields on THIS screen rather than a second admin page, and get
 * there without shipping any JavaScript — the schema describes the fields and this
 * component draws them with the same card, label and control styles as the built-in
 * tabs.
 *
 * Every field is one .edfw-srow: label and help text on the left, control on the
 * right. That keeps toggles, numbers and selects on a single alignment grid instead
 * of each type indenting differently.
 *
 * Anything unrecognised is skipped rather than rendered as a broken control, so a
 * newer add-on cannot break an older copy of this app.
 */

function Control( { field, value, accent, onChange } ) {
	const { key, type, label } = field;

	switch ( type ) {
		case 'toggle':
			return (
				<Toggle
					checked={ value === 'yes' }
					accent={ accent }
					label={ label }
					onChange={ ( v ) => onChange( key, v ? 'yes' : 'no' ) }
				/>
			);

		case 'number':
			return (
				<input
					className="edfw-input"
					type="number"
					min={ field.min ?? 0 }
					step={ field.step ?? 1 }
					value={ value ?? '' }
					aria-label={ label }
					onChange={ ( e ) => onChange( key, e.target.value ) }
				/>
			);

		case 'select':
			return (
				<select
					className="edfw-select"
					value={ value ?? '' }
					aria-label={ label }
					onChange={ ( e ) => onChange( key, e.target.value ) }
				>
					{ ( field.options || [] ).map( ( o ) => (
						<option key={ o.value } value={ o.value }>{ o.label }</option>
					) ) }
				</select>
			);

		case 'text':
			return (
				<input
					className="edfw-input"
					type="text"
					value={ value ?? '' }
					aria-label={ label }
					placeholder={ field.placeholder || '' }
					onChange={ ( e ) => onChange( key, e.target.value ) }
				/>
			);

		default:
			return null;
	}
}

const SUPPORTED = [ 'toggle', 'number', 'select', 'text' ];

export default function SchemaSections( { tab, state, dispatch, accent } ) {
	const sections = ( state.schema || [] ).filter( ( s ) => ( s.tab || 'general' ) === tab );
	if ( ! sections.length ) return null;

	const set = ( key, value ) => dispatch( { type: 'SET_FIELD', key, value } );

	return (
		<>
			{ sections.map( ( section ) => {
				const fields = ( section.fields || [] ).filter( ( f ) => SUPPORTED.includes( f.type ) );
				if ( ! fields.length ) return null;

				return (
					<div className="edfw-card" key={ section.id }>
						<div className="edfw-card__title">
							{ section.title }
							{ section.badge && <span className="edfw-chip">{ section.badge }</span> }
						</div>
						{ section.description && (
							<div className="edfw-card__desc">{ section.description }</div>
						) }

						<div className="edfw-srows">
							{ fields.map( ( field ) => (
								<div className="edfw-srow" key={ field.key }>
									<div className="edfw-srow__text">
										<div className="edfw-srow__label">{ field.label }</div>
										{ field.description && (
											<div className="edfw-srow__desc">{ field.description }</div>
										) }
									</div>
									<div className="edfw-srow__control">
										<Control
											field={ field }
											value={ state.settings[ field.key ] }
											accent={ accent }
											onChange={ set }
										/>
									</div>
								</div>
							) ) }
						</div>
					</div>
				);
			} ) }
		</>
	);
}
