/**
 * WordPress dependencies
 */
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

/**
 * Internal dependencies
 */
import Inspector from "./inspector-controls.js";

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
export default function edit ( props ) {

	const {
		attributes,
	} = props;

	// Standard editor block processing, required for Block Editor to add classes etc.
	const blockProps = useBlockProps();
	const innerBlocksProps = useInnerBlocksProps( blockProps );

	// Note: isActive (set via Variations block) to selectively hide it in the admin.
	return (
		<>
			<Inspector { ...props } />
			<div
				{ ...innerBlocksProps }
				hidden={ ! attributes.isActive }
			/>
		</>
	);
}
