const { registerPlugin } = wp.plugins;
const { __ } = wp.i18n;
const { Fragment,useState } = wp.element;
const { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;
const { Panel,PanelBody, PanelRow, ToggleControl,SelectControl,Guide,ButtonGroup,Button,RangeControl,ColorPicker,Card, CardBody,CardMedia,CardDivider,RadioControl,TextControl,FormFileUpload,IconButton } = wp.components;
const { compose } = wp.compose;
const { withDispatch, withSelect,select } = wp.data;

const { MediaUpload, MediaUploadCheck,MediaPlaceholder } = wp.blockEditor;




const CustomSidebarMetaComponent = (props) => {

    return(
        <Fragment> 
           {/* My Code */}
        </Fragment>
    );
}


const CustomSidebarMeta = compose([

    // My Code

])(CustomSidebarMetaComponent);



// Sidebar
const CustomSidebarComponent = () => {
    const postType = select("core/editor").getCurrentPostType();
    if ( !includes(["df_plus_block"], postType) ) {
      return null;
    }
    return(
        <>
            <PluginSidebarMoreMenuItem 
                target='df-custom-sidebar'
                icon='screenoptions'
            >{__('DF Block Settings', 'df-sidebar-gutenberg')}
            </PluginSidebarMoreMenuItem>
            <PluginSidebar 
                name="df-custom-sidebar" 
                title={__('DF Block Settings', 'df-sidebar-gutenberg')}
            >                
                <PanelBody
                    title={__('Layout', 'df-sidebar-gutenberg')}
                    initialOpen={true}
                >
                    <CustomSidebarMeta />
                </PanelBody>
            </PluginSidebar>
        </>
    );
}