import {
	unmountComponentAtNode,
	render,
	createElement
} from '@wordpress/element'
import BuilderRoot from './panels-builder/BuilderRoot'

const buildersMaps = {
	new_header: {
		panelType: 'header'
	},

	footer: {
		panelType: 'footer'
	}
}

const openBuilderFor = key => {
	document.querySelector('.wp-full-overlay').classList.add('ct-show-builder')

	render(
		<BuilderRoot panelType={buildersMaps[key].panelType} />,
		document.querySelector('.ct-panel-builder')
	)
}

const closeBuilderFor = key => {
	document
		.querySelector('.wp-full-overlay')
		.classList.remove('ct-show-builder')

	unmountComponentAtNode(document.querySelector('.ct-panel-builder'))
}

export const initBuilder = () => {
	return

	const root = document.createElement('div')
	root.classList.add('ct-panel-builder')

	document.querySelector('.wp-full-overlay').appendChild(root)

	Object.keys(buildersMaps).map(singleKey =>
		(wp.customize.panel(singleKey)
			? wp.customize.panel
			: wp.customize.section)(singleKey, section =>
			section.expanded.bind(value =>
				value ? openBuilderFor(singleKey) : closeBuilderFor(singleKey)
			)
		)
	)
}