import { createElement, Component } from '@wordpress/element'
import classnames from 'classnames'
import { normalizeCondition, matchValuesWithCondition } from 'match-conditions'
const ImagePicker = ({
option: { choices, tabletChoices, mobileChoices },
option,
device,
value,
values,
onChange,
}) => {
const { className, ...attr } = { ...(option.attr || {}) }
let deviceChoices = option.choices
if (device === 'tablet' && tabletChoices) {
deviceChoices = tabletChoices
}
if (device === 'mobile' && mobileChoices) {
deviceChoices = mobileChoices
}
let matchingChoices = (
Array.isArray(deviceChoices)
? deviceChoices
: Object.keys(deviceChoices).map((choice) => ({
key: choice,
...deviceChoices[choice],
}))
).filter(({ key }) => {
if (!option.conditions) {
return true
}
if (!option.conditions[key]) {
return true
}
return matchValuesWithCondition(
normalizeCondition(option.conditions[key]),
values
)
})
let normalizedValue = matchingChoices.map(({ key }) => key).includes(value)
? value
: option.value
return (
{matchingChoices.map((choice) => (
- onChange(choice.key)}
key={choice.key}>
{choice.src.indexOf('
) : (
)}
{option.title && null && {choice.title}}
{choice.title && (
{choice.title}
)}
))}
)
}
export default ImagePicker