import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { InnerBlocks, useBlockProps,  MediaUpload} from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';
import { dispatch, select, use } from '@wordpress/data';


export default function Edit(props, clientId) {

  const { context } = props;
  const blockProps = useBlockProps();  
  const hasChildBlocks = props.clientId && wp.data.select('core/block-editor').getBlock(props.clientId).innerBlocks;
  const ALLOWED_BLOCKS = [ 'core/image', 'purdue/storytelling-content-block', 'purdue/storytelling-qa-block' ]
  const BLOCKS_TEMPLATE = [
  [ 'core/paragraph', { placeholder: 'Add Content Block' } ],
];

  const innerBlocks = select( 'core/block-editor' ).getBlock( props.clientId )?.innerBlocks || [];
  const imageBlock = innerBlocks[0];

  

  const replaceImage = ( media ) => {
    if ( imageBlock ) {
      dispatch( 'core/block-editor' ).updateBlockAttributes( imageBlock.clientId, {
        url: media.url,
        alt: media.alt,
        id: media.id,
      } );
    }
  };

  useEffect(() => {
      	// Make sure the block gets a unique ID assigned
      if (!props.attributes.blockId) {
        props.setAttributes({ blockId: props.clientId })
      }
    }, [])


    
  return (

    <div { ...blockProps } id={`block-${props.attributes.blockId}`} className={`bulma-blocks-editor-column column is-half is-gapless`}>
      <InnerBlocks
          templateLock={ false }
          allowedBlocks={ ALLOWED_BLOCKS }
          template={ BLOCKS_TEMPLATE }
          renderAppender={
            hasChildBlocks ?
              undefined :
              () => <InnerBlocks.ButtonBlockAppender />
          }
        />
        

    </div>
  );
}
