import "choerodon-ui/lib/spin/style";
import _Spin from "@hzero-front-ui/c7n-ui/lib/Spin";
import "choerodon-ui/lib/icon/style";
import _Icon from "choerodon-ui/lib/icon";
import "choerodon-ui/lib/tabs/style";
import _Tabs from "choerodon-ui/lib/tabs";
import React, { lazy, Suspense, memo, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import PageTitle from "../../../../../components/page-title";
import { useApplicationStore } from "./stores";
import { useResourceStore } from "../../../stores";
import Modals from "./modals";
import "./index.less";
var TabPane = _Tabs.TabPane;
var Configs = /*#__PURE__*/lazy(function () {
  return import("./configs");
});
var Cipher = /*#__PURE__*/lazy(function () {
  return import("./cipher");
});
var NetContent = /*#__PURE__*/lazy(function () {
  return import("./net");
});
var AppTitle = /*#__PURE__*/memo(function (_ref) {
  var name = _ref.name;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Icon, {
    type: "widgets"
  }), /*#__PURE__*/React.createElement("span", {
    className: "c7ncd-page-title-text"
  }, name));
});
var AppContent = observer(function () {
  var _useApplicationStore = useApplicationStore(),
      formatMessage = _useApplicationStore.intl.formatMessage,
      _useApplicationStore$ = _useApplicationStore.tabs,
      NET_TAB = _useApplicationStore$.NET_TAB,
      MAPPING_TAB = _useApplicationStore$.MAPPING_TAB,
      CIPHER_TAB = _useApplicationStore$.CIPHER_TAB,
      baseInfoDs = _useApplicationStore.baseInfoDs,
      appStore = _useApplicationStore.appStore;

  var _useResourceStore = useResourceStore(),
      prefixCls = _useResourceStore.prefixCls,
      intlPrefix = _useResourceStore.intlPrefix,
      resourceStore = _useResourceStore.resourceStore,
      treeDs = _useResourceStore.treeDs;

  var selectedKey = resourceStore.getSelectedMenu.key;

  function handleChange(key) {
    appStore.setTabKey(key);
  }

  function getCurrent() {
    var record = baseInfoDs.current;

    if (record) {
      var id = record.get('id');
      var name = record.get('name') || record.get('marketServiceName');
      return {
        id: id,
        name: name
      };
    }

    return null;
  }

  useEffect(function () {
    var current = getCurrent();

    if (current) {
      var menuItem = treeDs.find(function (item) {
        return item.get('key') === selectedKey && item.get('id') === current.id;
      });

      if (menuItem && menuItem.get('name') !== current.name) {
        menuItem.set('name', current.name);
      }
    }
  });

  function getTitle() {
    var current = getCurrent();

    if (current) {
      return /*#__PURE__*/React.createElement(AppTitle, {
        name: current.name
      });
    }

    return null;
  }

  function getFallBack() {
    var name = resourceStore.getSelectedMenu.name;
    return /*#__PURE__*/React.createElement(AppTitle, {
      name: name
    });
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-application")
  }, /*#__PURE__*/React.createElement(PageTitle, {
    fallback: getFallBack(),
    content: getTitle()
  }), /*#__PURE__*/React.createElement(_Tabs, {
    className: "".concat(prefixCls, "-application-tabs"),
    animated: false,
    activeKey: appStore.getTabKey,
    onChange: handleChange
  }, /*#__PURE__*/React.createElement(TabPane, {
    key: NET_TAB,
    tab: formatMessage({
      id: "".concat(intlPrefix, ".application.tabs.networking")
    })
  }, /*#__PURE__*/React.createElement(Suspense, {
    fallback: /*#__PURE__*/React.createElement(_Spin, null)
  }, /*#__PURE__*/React.createElement(NetContent, null))), /*#__PURE__*/React.createElement(TabPane, {
    key: MAPPING_TAB,
    tab: formatMessage({
      id: "".concat(intlPrefix, ".application.tabs.mapping")
    })
  }, /*#__PURE__*/React.createElement(Suspense, {
    fallback: /*#__PURE__*/React.createElement(_Spin, null)
  }, /*#__PURE__*/React.createElement(Configs, null))), /*#__PURE__*/React.createElement(TabPane, {
    key: CIPHER_TAB,
    tab: formatMessage({
      id: "".concat(intlPrefix, ".application.tabs.cipher")
    })
  }, /*#__PURE__*/React.createElement(Suspense, {
    fallback: /*#__PURE__*/React.createElement(_Spin, null)
  }, /*#__PURE__*/React.createElement(Cipher, null)))), /*#__PURE__*/React.createElement(Modals, null));
});
export default AppContent;