import { createElement, useRef, useState } from '@wordpress/element'
import classnames from 'classnames'
import OptionsPanel from '../../options/OptionsPanel'
import { getValueFromInput } from '../../options/helpers/get-value-from-input'
import PanelLevel from '../../options/components/PanelLevel'
import { DeviceManagerProvider } from '../components/useDeviceManager'
import { CustomizerValues } from './customizer-values-context'
const Options = ({ option, renderOptions = null }) => {
const [values, setValues] = useState(null)
const containerRef = useRef()
const onChangeFor = (key, val) => {
setValues((values) => {
return {
...(values ||
getValueFromInput(option['inner-options'], {}, (id) => ({
[id]: wp.customize(id) && wp.customize(id)(),
}))),
[key]: val,
}
})
wp.customize(key) && wp.customize(key).set(val)
}
const computedValues =
values ||
getValueFromInput(option['inner-options'], {}, (id) => ({
[id]: wp.customize(id) && wp.customize(id)(),
}))
return (
{
onChangeFor(key, val)
}}
options={option['inner-options']}
value={computedValues}
/>
)
}
export default Options