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/tooltip/style";
import _Tooltip from "choerodon-ui/lib/tooltip";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { useEffect, useMemo } from 'react';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';
import PageTitle from "../../../../../components/page-title";
import EnvItem from "../../../../../components/env-item";
import Modals from "./modals";
import { useResourceStore } from "../../../stores";
import { useREStore } from "./stores";
import SyncSituation from "./sync-situation";
import "./index.less";
import openWarnModal from "../../../../../utils/openWarnModal";

function countDisplay(count, max) {
  return count > max ? /*#__PURE__*/React.createElement(_Tooltip, {
    title: count
  }, "".concat(max, "+")) : count;
}

function ItemNumberByStatus(_ref) {
  var code = _ref.code,
      count = _ref.count,
      name = _ref.name,
      prefixCls = _ref.prefixCls;
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-grid-right-item")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-status ").concat(prefixCls, "-re-status_").concat(code)
  }, countDisplay(count, 99)), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-grid-right-text")
  }, /*#__PURE__*/React.createElement("span", null, name)));
}

function ItemNumberByResource(_ref2) {
  var code = _ref2.code,
      count = _ref2.count,
      name = _ref2.name,
      prefixCls = _ref2.prefixCls;
  var iconMappings = {
    instanceCount: 'instance_outline',
    serviceCount: 'router',
    ingressCount: 'language',
    certificationCount: 'class',
    configMapCount: 'compare_arrows',
    secretCount: 'vpn_key'
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-grid-left-item")
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: iconMappings[code],
    className: "".concat(prefixCls, "-re-grid-left-icon")
  }), /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-re-grid-left-number")
  }, countDisplay(count, 99)), /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-re-grid-left-name")
  }, name));
}

var Content = observer(function () {
  var statusCount = useMemo(function () {
    return ['runningInstanceCount', 'operatingInstanceCount', 'stoppedInstanceCount', 'failedInstanceCount'];
  }, []);
  var resourceCount = useMemo(function () {
    return ['instanceCount', 'serviceCount', 'ingressCount', 'certificationCount', 'configMapCount', 'secretCount'];
  }, []);

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

  var _useREStore = useREStore(),
      baseInfoDs = _useREStore.baseInfoDs,
      resourceCountDs = _useREStore.resourceCountDs;

  function getCounts(type) {
    var record = resourceCountDs.current;

    if (type === 'status') {
      return statusCount.map(function (item) {
        var count = record ? record.get(item) : 0;
        var name = formatMessage({
          id: "".concat(intlPrefix, ".status.").concat(item)
        });
        return /*#__PURE__*/React.createElement(ItemNumberByStatus, {
          key: item,
          code: item,
          name: name,
          count: count,
          prefixCls: prefixCls
        });
      });
    }

    return resourceCount.map(function (item) {
      var count = record ? record.get(item) : 0;
      var name = formatMessage({
        id: "".concat(intlPrefix, ".resource.").concat(item)
      });
      return /*#__PURE__*/React.createElement(ItemNumberByResource, {
        key: item,
        code: item,
        name: name,
        count: count,
        prefixCls: prefixCls
      });
    });
  }

  function refresh() {
    treeDs.query();
  }

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

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

    return null;
  }

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

    if (currentBase) {
      var id = currentBase.id,
          name = currentBase.name,
          active = currentBase.active,
          connect = currentBase.connect;
      var menuItem = treeDs.find(function (item) {
        return item.get('key') === String(id);
      });

      if (menuItem) {
        // 清除已经停用的环境
        if (!active) {
          openWarnModal(refresh, formatMessage);
        } else if (menuItem.get('connect') !== connect || menuItem.get('name') !== name) {
          runInAction(function () {
            menuItem.set({
              name: name,
              connect: connect
            });
            resourceStore.setSelectedMenu(_objectSpread(_objectSpread({}, resourceStore.getSelectedMenu), {}, {
              name: name,
              connect: connect
            }));
          });
        }
      }
    }
  }, [baseInfoDs.current]);

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

    if (record) {
      var name = record.get('name');
      var connect = record.get('connect');
      var clusterName = record.get('clusterName');
      return /*#__PURE__*/React.createElement(EnvItem, {
        isTitle: true,
        connect: connect,
        name: name,
        formatMessage: formatMessage,
        clusterName: clusterName
      });
    }

    return null;
  }

  function getFallBack() {
    var _resourceStore$getSel = resourceStore.getSelectedMenu,
        name = _resourceStore$getSel.name,
        connect = _resourceStore$getSel.connect;
    return /*#__PURE__*/React.createElement(EnvItem, {
      isTitle: true,
      name: name,
      connect: connect
    });
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re")
  }, /*#__PURE__*/React.createElement(PageTitle, {
    content: getTitle(),
    fallback: getFallBack()
  }), /*#__PURE__*/React.createElement(_Spin, {
    spinning: resourceCountDs.status === 'loading'
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-card-wrap")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-card ").concat(prefixCls, "-re-card_left")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-card-title")
  }, formatMessage({
    id: "".concat(intlPrefix, ".resource.deploy")
  })), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-grid-left")
  }, getCounts())), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-card ").concat(prefixCls, "-re-card_right")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-card-title")
  }, formatMessage({
    id: "".concat(intlPrefix, ".instance.status")
  })), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-re-grid-right")
  }, getCounts('status'))))), /*#__PURE__*/React.createElement(SyncSituation, null), /*#__PURE__*/React.createElement(Modals, null));
});
export default Content;