import FieldControl from '../components/FieldControl';
import CheckboxButtonGroup from '../components/CheckboxButtonGroup';
import {getCheckedKeys} from '../utils/checkedKeys';

/**
 * CheckboxButtonGroupField
 * * Renders a group of buttons that act as checkboxes.
 * Compatible with the PHP template 'checkbox_button_group.php'.
 * * Value Format: a list of checked keys, e.g. [ "administrator", "editor" ] (always saved like this).
 * A legacy flags object like { "administrator": "1" } is still read.
 */
const CheckboxButtonGroupField = ( {field, value, onChange} ) => {

	// A saved empty list means "nothing checked", like in the PHP template.
	const hasSavedValue = value !== undefined && value !== null && value !== '';
	const checkedKeys = getCheckedKeys( hasSavedValue ? value : field.default );
	const currentValues = Object.fromEntries( checkedKeys.map( k => [k, '1'] ) );
	const optionKeys = (Array.isArray( field.options ) ? field.options : []).map( option => String( option.key || option.value ) );

	// Option order first, then checked keys that have no option (anymore), so they are not lost.
	const handleChange = ( newValues ) => {
		const keys = getCheckedKeys( newValues );
		onChange( field.id, [...optionKeys.filter( k => keys.includes( k ) ), ...keys.filter( k => !optionKeys.includes( k ) )] );
	};

	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={handleChange}
				name={field.id}
			/>
		</FieldControl>
	);
};

export default CheckboxButtonGroupField;