// import styles for json tree
import 'style!css!react-transform-debug-inspector/debug-inspector.css';
import { DevTools, LogMonitor } from 'redux-devtools/lib/react';
function getReduxPanel(component) {
  // instead of plain object or literal, you can pass any component - like redux DevTools
  if (component.context.store) {
    return (
      <DevTools store={component.context.store} monitor={LogMonitor} />
    );
  }
}
let _enabled = false;
export default {
  // add your custom panels ('props', 'state', 'context' by default)
  getPanels: (defaultPanels, component) => [
    ...(
      component.context.store ? [{
        name: 'redux',
        data: getReduxPanel(component)
      }] : []
    ),
    ...defaultPanels
  ],
  // enable or disable inspector with key binding or whatever
  enabledTrigger: enable => {
    window.addEventListener('keydown', e => {
      if (e.keyCode === 220) {
        _enabled = !_enabled;
        enable(_enabled);
      }
    });
    
    // another example: enable(location.search.indexOf('debug') !== -1)
    enable(_enabled);
  },
  
  // filter components that don't need inspector
  showPin: component => true
}