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 { useEnvironmentStore } from "../../stores";
import { useMainStore } from "../stores";
import "./index.less";
import "./theme4.less";
var TreeMenu = observer(function () {
  var _useEnvironmentStore = useEnvironmentStore(),
      treeDs = _useEnvironmentStore.treeDs,
      envStore = _useEnvironmentStore.envStore,
      prefixCls = _useEnvironmentStore.prefixCls;

  var _useMainStore = useMainStore(),
      mainStore = _useMainStore.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, envStore);
  }, [treeDs.data]);
  return /*#__PURE__*/React.createElement("nav", {
    style: bounds,
    className: "".concat(prefixCls, "-sidebar")
  }, /*#__PURE__*/React.createElement(TreeView, {
    ds: treeDs,
    store: envStore,
    nodesRender: nodeRenderer
  }));
});
export default TreeMenu;