import InspectorControls from './components/InspectorControls';
import BlockControls from './components/BlockControls';
import filterAttributes from '../../utils/filter-attributes';
import queryLoopAttributes from './attributes';
import {
BlockContextProvider,
InnerBlocks,
useBlockProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import LayoutSelector from './components/LayoutSelector';
import { useSelect } from '@wordpress/data';
import InspectorAdvancedControls from './components/InspectorAdvancedControls';
export default function QueryLoopEdit( props ) {
const {
attributes,
clientId,
setAttributes,
} = props;
const blockProps = useBlockProps();
const hasInnerBlocks = useSelect(
( select ) =>
!! select( blockEditorStore ).getBlocks( clientId ).length,
[ clientId ]
);
return (
<>
<div { ...blockProps }>
{ ! hasInnerBlocks
? <LayoutSelector clientId={ clientId } />
: <>
<BlockControls clientId={ clientId } />
<InspectorControls
attributes={ filterAttributes( attributes, Object.keys( queryLoopAttributes ) ) }
setAttributes={ setAttributes }
clientId={ clientId }
/>
<InspectorAdvancedControls
blockLabel={ attributes.blockLabel }
setAttributes={ setAttributes }
/>
<BlockContextProvider value={ { 'generateblocks/query': attributes.query } }>
<InnerBlocks
renderAppender={ false }
/>
</BlockContextProvider>
</>
}
</div>
</>
);
}