import React from 'react';
import { connect } from 'react-redux';
import Spin from 'antd/es/spin';
import 'antd/es/spin/style';
import StandalonePlaceholder from './component/StandalonePlaceholder';
import { getNamespacesList } from '../../core/dataBus/selectors';
import { getActiveNamespace } from '../../core/namespaceIntegration/selectors';
import TreeDiagram from './component/TreeDiagram';
import './TreeDiagamsContainer.less';

var TreeDiagramsContainer = function TreeDiagramsContainer(_ref) {
  var namespacesList = _ref.namespacesList,
      activeNamespace = _ref.activeNamespace;

  if (!namespacesList.length) {
    return !process.env.LOCAL ? React.createElement(StandalonePlaceholder, null) : React.createElement("div", {
      className: 'MainLoader'
    }, React.createElement(Spin, null), React.createElement(Spin, null), React.createElement(Spin, null));
  } // TODO: use ref for TreeDiagram container (on mount set it to store)


  return React.createElement("div", {
    className: 'TreeDiagramsContainer'
  }, namespacesList.map(function (namespace) {
    return React.createElement(TreeDiagram, {
      key: namespace,
      namespace: namespace,
      multiple: namespacesList.length > 1,
      active: namespace === activeNamespace
    });
  }));
};

var mapStateToProps = function mapStateToProps(state) {
  return {
    activeNamespace: getActiveNamespace(state),
    namespacesList: getNamespacesList(state)
  };
};

export default connect(mapStateToProps)(TreeDiagramsContainer);