import FieldControl from '../components/FieldControl';

const PositioningField = ({ field, value, onChange }) => {
	const { positioning_options: optionGroups = {} } = field;

	const handlePositionChange = (newValue) => {
		onChange(newValue);
	};

	return (
		<FieldControl
			label={field.label || 'Text Flow'}
			id={field.id}
			className="adpresso-ad-positioning-position"
		>
			<div className="adpresso-ad-positioning-position-groups-wrapper">
				{Object.entries(optionGroups).map(([groupKey, group]) => (
					<div key={groupKey} className="adpresso-ad-positioning-position-group">
						<h3 className="adpresso-ad-positioning-position-group-heading">{group.title}</h3>
						{Object.entries(group.options).map(([optionKey, option]) => {
							const inputId = `adpresso-pos-${optionKey}`;
							const checked = optionKey === value;
							return (
								<label
									key={optionKey}
									htmlFor={inputId}
									className={`adpresso-ad-positioning-position-wrapper ${checked ? 'is-checked' : ''}`}

								>
									<input
										type="radio"
										id={inputId}
										name={field.id}
										value={optionKey}
										checked={checked}
										onChange={(e) => handlePositionChange(e.target.value)}
										className="adpresso-ad-positioning-position-optio"
									/>
									<div className="adpresso-ad-positioning-position-ico" title={option.title}>
										<span>{option.title}</span>
									</div>
								</label>
							);
						})}
						<p className="adpresso-ad-positioning-position-group-description">{group.description}</p>
					</div>
				))}
			</div>
		</FieldControl>
	);
};

export default PositioningField;