/* eslint-disable max-len */
import React, { useMemo, useCallback, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import setTreeMenuSelect from "../../../../utils/setTreeMenuSelect";
import TreeView from "../../../../components/tree-view";
import TreeItem from "./tree-item";
import { useClusterStore } from "../../stores";
import { useClusterMainStore } from "../stores";
import "./index.less";
var TreeMenu = observer(function () {
  var _useClusterStore = useClusterStore(),
      treeDs = _useClusterStore.treeDs,
      clusterStore = _useClusterStore.clusterStore;

  var _useClusterMainStore = useClusterMainStore(),
      mainStore = _useClusterMainStore.mainStore;

  var bounds = useMemo(function () {
    return mainStore.getNavBounds;
  }, [mainStore.getNavBounds]);
  var nodeRenderer = useCallback(function (record, search) {
    return /*#__PURE__*/React.createElement(TreeItem, {
      record: record,
      search: search
    });
  }, []);
  useEffect(function () {
    setTreeMenuSelect(treeDs, clusterStore);
  }, [treeDs.data]);
  return /*#__PURE__*/React.createElement("nav", {
    style: bounds,
    className: "c7ncd-cluster-sidebar"
  }, /*#__PURE__*/React.createElement(TreeView, {
    ds: treeDs,
    store: clusterStore,
    nodesRender: nodeRenderer
  }));
});
export default TreeMenu;