import Fields from '../Fields';

const GroupField = ({ field, value, onChange }) => {
	const groupValue = value || {};

	const setSubField = (name, subValue) => {
		onChange({ ...groupValue, [name]: subValue });
	};

	return (
		<div className="jvb-group-field" id={field.name}>
			{ field.label && (
				<h4 className="components-base-control__label">{ field.label }</h4>
			) }
			{
				Object.entries(field.fields || {}).map(([name, subfield]) => (
					<Fields
						key={name}
						field={{ ...subfield, name }}
						value={groupValue[name]}
						onChange={(v) => setSubField(name, v)}
						meta={groupValue}
					/>
				))
			}
			{ field.description && <p className="hint">{field.description}</p> }
		</div>
	);
};

export default GroupField;