import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import Sidebar from './sidebar.jsx';
const { Fragment } = wp.element;

/* Import CSS */
import './editor.scss';
import './style.scss';

const store = createStore(
	rootReducer,
	window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
const { registerPlugin } = wp.plugins;
// https://github.com/WordPress/gutenberg/blob/3450273fe7522101e3809b270c80a7b9a3ebcf3a/packages/compose/src/with-state/README.md
// import { withState } from '@wordpress/compose';
const { __ } = wp.i18n;

class DesignPanel extends React.Component {
	render() {
		return (
			<Fragment>
				<PluginSidebarMoreMenuItem target="design">
					{ __( 'Design Library' ) }
				</PluginSidebarMoreMenuItem>
				<PluginSidebar name="design" title="Design Library">
					<Provider store={ store }>
						<Sidebar />
					</Provider>
				</PluginSidebar>
			</Fragment>
		);
	}
}

registerPlugin( 'design', {
	icon: 'carrot',
	render: DesignPanel,
} );