import { createElement, useRef } from '@wordpress/element'
import { __ } from 'ct-i18n'
import deepEqual from 'deep-equal'
import {
PanelBody,
__experimentalBoxControl as BoxControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components'
import OptionsPanel from '../../options/OptionsPanel'
import { getFirstLevelOptions } from '../../options/helpers/get-value-from-input'
import { optionWithDefault } from '../../options/GenericOptionType'
const ToolsWithOptionsPanel = ({
label,
options,
attributes,
setAttributes,
}) => {
const panelItems = getFirstLevelOptions(options)
return (
{
const defaultValue = Object.keys(panelItems).reduce(
(acc, item) => {
return {
...acc,
[item]: panelItems[item].value,
}
},
{}
)
setAttributes(defaultValue)
}}>
{Object.keys(panelItems).map((optionId, index) => {
const option = panelItems[optionId]
return (
{
setAttributes({
[optionId]: option.value,
})
}}
hasValue={() =>
!deepEqual(
option.value,
optionWithDefault({
value: attributes[optionId],
option,
})
)
}
key={optionId}
label={option.label}>
{index === 0 && (
{
setAttributes({
[optionId]: optionValue,
})
}}
options={options}
value={attributes}
hasRevertButton={false}
/>
)}
)
})}
)
}
export default ToolsWithOptionsPanel