/* jshint esversion: 6 */
import HFGBuilderComponent from "./HFGBuilderComponent.tsx";
import { render } from "@wordpress/element";
import React from "react";

export const BuilderControl = wp.customize.Control.extend({
	renderContent() {
		const customizePreview = document.getElementById("customize-controls");
		const where = document.querySelector(
			`#accordion-section-${this.params.section}`
		);

		const builderPortalMount = document.createElement("div");
		builderPortalMount.classList.add(
			"stax-builder-portal-wrap",
			"stax-hfg-builder"
		);
		customizePreview.appendChild(builderPortalMount);

		render(
			<HFGBuilderComponent
				control={this}
				portalMount={builderPortalMount}
			/>,
			where
		);
	},
});
