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

/**
 * CheckboxButtonGroupField
 * * Renders a group of buttons that act as checkboxes.
 * Compatible with the PHP template 'checkbox_group_buttons.php'.
 * * Expected Value Format: An object/associative array where keys exist if checked.
 * e.g. { "administrator": "1", "editor": "1" }
 */
const CheckboxButtonGroupField = ( {field, value, onChange} ) => {

	const rawValues = (value && Object.keys( value ).length > 0) ? value : field.default;
	const currentValues = Array.isArray( rawValues )
		? Object.fromEntries( rawValues.map( k => [k, '1'] ) )
		: (rawValues || {});

	return (
		<FieldControl
			label={field.label}
			help={field.description}
			id={field.id}
			className="adpresso-field-wrapper adpresso-checkbox-group-wrapper"
			premium={field.premium}
		>
			<CheckboxButtonGroup
				options={field.options}
				values={currentValues}
				onChange={( newValues ) => onChange( field.id, newValues )}
				name={field.id}
			/>
		</FieldControl>
	);
};

export default CheckboxButtonGroupField;