import { createElement, Fragment } from '@wordpress/element'
import OptionsPanel from '../OptionsPanel'
import { normalizeCondition, matchValuesWithCondition } from 'match-conditions'

const Condition = ({
	renderingChunk,
	value,
	onChange,
	purpose,
	hasRevertButton
}) =>
	renderingChunk.map(
		conditionOption =>
			matchValuesWithCondition(
				normalizeCondition(conditionOption.condition),
				value
			) ? (
				<OptionsPanel
					purpose={purpose}
					key={conditionOption.id}
					onChange={val => onChange({ ...value, ...val })}
					options={conditionOption.options}
					value={value}
					hasRevertButton={hasRevertButton}
				/>
			) : (
				[]
			)
	)

export default Condition