import { createElement } from '@wordpress/element'
import PlacementsBuilder from './PlacementsBuilder'

export const getOptionIdFor = (panelType, id) => `${panelType}_item_${id}`
export const expandOptionsFor = (panelType, id) =>
	wp.customize
		.section(`${getOptionIdFor(panelType, id.replace(/-/g, '_'))}_panel`)
		.expand()

const BuilderRoot = ({ panelType }) => {
	const items = ct_customizer_localizations.header_builder_data[panelType]

	const availableItems = items.filter(
		({ id }) =>
			id !== 'bottom-bar' &&
			id !== 'middle-bar' &&
			id !== 'offcanvas-bar' &&
			id !== 'top-bar'
	)

	return (
		<div>
			<PlacementsBuilder />

			<ul className="ct-available-items">
				{availableItems.map(item => (
					<li key={item.id}>
						{item.config.name}

						<button
							onClick={() => {
								wp.customize
									.section(
										`${getOptionIdFor(
											panelType,
											item.id
										)}_panel`
									)
									.expand()
							}}>
							configure
						</button>
					</li>
				))}
			</ul>
		</div>
	)
}

export default BuilderRoot