import { __ } from "@wordpress/i18n";
import {
    RichText,
    InspectorControls,
    useBlockProps,
    InnerBlocks,
} from "@wordpress/block-editor";

import {
    PanelBody,
    PanelRow,
    TextControl,
} from "@wordpress/components";

  const ALLOWED_BLOCKS = [ 'purdue/storytelling-column', ['purdue/storytelling-content'] ];
  const LEFT_BLOCKS_TEMPLATE = [
      [ 'purdue/storytelling-column' ], ['purdue/storytelling-column' ]
  ];

const Edit = ( props ) => {

  const { setAttributes } = props;
  const { id} = props.attributes;
  const blockProps = useBlockProps();
  setAttributes( { id: props.clientId } );

  return (
    <div { ...blockProps }>
      <InspectorControls>
      </InspectorControls>
      
      <div className={`columns is-gapless purdue-storytelling-side-by-side-editor`}>
            <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} template={LEFT_BLOCKS_TEMPLATE} templateLock={ false }
                            templateInsertUpdatesSelection={ false } />
      </div>
    </div>
  );
}

export default Edit;