import { connect } from 'react-redux';
import { LayoutManager } from 'react-viewerbase';
import OHIF from 'ohif-core';

const mapStateToProps = state => {
  const viewportPluginIds = state.plugins.availablePlugins
    .filter(plugin => plugin.type === OHIF.plugins.PLUGIN_TYPES.VIEWPORT)
    .map(plugin => plugin.id);

  const availablePlugins = {};
  viewportPluginIds.forEach(id => {
    const plugin = OHIF.plugins.availablePlugins.find(
      plugin => plugin.id === id
    );
    if (plugin) {
      availablePlugins[id] = plugin.component;
    }
  });

  // TODO Use something like state.plugins.defaultPlugin[OHIF.plugins.PLUGIN_TYPES.VIEWPORT]
  let defaultPlugin;
  if (viewportPluginIds && viewportPluginIds.length) {
    defaultPlugin = viewportPluginIds[0];
  }

  return {
    layout: state.viewports.layout,
    activeViewportIndex: state.viewports.activeViewportIndex,
    availablePlugins,
    defaultPlugin,
  };
};

const ConnectedLayoutManager = connect(
  mapStateToProps,
  null
)(LayoutManager);

export default ConnectedLayoutManager;