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

const Condition = ({
	renderingChunk,
	value,
	onChange,
	purpose,
	hasRevertButton
}) => {
	return renderingChunk.map(
		conditionOption =>
			matchValuesWithCondition(
				normalizeCondition(conditionOption.condition),
				conditionOption.global
					? Object.keys(conditionOption.condition).reduce(
							(current, key) => ({
								...current,
								[key]: wp.customize(key)()
							}),
							{}
						)
					: value
			) ? (
				<OptionsPanel
					purpose={purpose}
					key={conditionOption.id}
					onChange={val => onChange({ ...value, ...val })}
					options={conditionOption.options}
					value={value}
					hasRevertButton={hasRevertButton}
				/>
			) : (
				[]
			)
	)
}

export default Condition