( function( wp ) {
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
    var SelectControl = wp.components.SelectControl;
    var withSelect = wp.data.withSelect;
    var withDispatch = wp.data.withDispatch;
    var compose = wp.compose.compose;
    var createElement = wp.element.createElement;

    var SidebarLayoutPanel = function( props ) {
        var postType = props.postType;
        // Show panel for both posts and pages.
        if ( 'page' !== postType && 'post' !== postType ) {
            return null;
        }
        
        // Use the localized setting to disable the control if needed.
        var disableControl = false;
        if ( typeof bootstrap_coach_sidebar_settings !== 'undefined' && bootstrap_coach_sidebar_settings.disable_sidebar ) {
            disableControl = true;
        }
        
        return createElement(
            PluginDocumentSettingPanel,
            {
                name: 'bootstrap-coach-sidebar-layout',
                title: 'Sidebar Layout',
                className: 'bootstrap-coach-sidebar-layout'
            },
            createElement( SelectControl, {
                label: 'Choose sidebar layout',
                value: props.sidebarLayout || '',
                options: [
                    { label: 'Default Layout', value: '' },
                    { label: 'No Sidebar', value: 'no-sidebar' },
                    { label: 'Left Sidebar', value: 'left-sidebar' },
                    { label: 'Right Sidebar', value: 'right-sidebar' }
                ],
                onChange: disableControl ? null : props.setSidebarLayout,
                disabled: disableControl,
                __nextHasNoMarginBottom: true
            } )
        );
    };

    var mapSelectToProps = withSelect( function( select ) {
        var meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
        var postType = select( 'core/editor' ).getCurrentPostType();
        return {
            sidebarLayout: meta.bootstrap_coach_sidebar_layout,
            postType: postType
        };
    } );

    var mapDispatchToProps = withDispatch( function( dispatch ) {
        return {
            setSidebarLayout: function( newValue ) {
                dispatch( 'core/editor' ).editPost( {
                    meta: { bootstrap_coach_sidebar_layout: newValue }
                } );
            }
        };
    } );

    var SidebarLayoutPanelPlugin = compose(
        mapSelectToProps,
        mapDispatchToProps
    )( SidebarLayoutPanel );

    registerPlugin( 'bootstrap-coach-sidebar-layout', {
        render: SidebarLayoutPanelPlugin
    } );
} )( window.wp );