import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import TabToolbarControls from './tab-toolbar-controls';
import useTabListItemsSync from './use-tab-list-items-sync';

function Edit( { clientId } ) {
	useTabListItemsSync( clientId );

	const blockProps = useBlockProps();

	// The template in the block type settings only specifies the two
	// structural child blocks, without inner block entries for
	// core/tab-list or core/tab-panels.
	//
	// If inner blocks were included in that template,
	// `synchronizeBlocksWithTemplate` (called whenever templateLock === 'all')
	// would recurse into the containers and truncate them to the template
	// count, causing data loss when a saved block with more than two tabs is
	// re-opened in the editor.
	//
	// Initial tab/panel creation is delegated to the tab-panels template
	// (templateLock: false, applied only when empty).
	const innerBlockProps = useInnerBlocksProps( blockProps, {
		__experimentalCaptureToolbars: true,
		templateLock: 'all',
		renderAppender: false,
	} );

	return (
		<div { ...innerBlockProps }>
			<TabToolbarControls tabsClientId={ clientId } />
			{ innerBlockProps.children }
		</div>
	);
}

export default Edit;