import "choerodon-ui/lib/icon/style";
import _Icon from "choerodon-ui/lib/icon";
import React, { Fragment, Suspense, useMemo, useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useClusterMainStore } from "../../../../stores";
import { useClusterContentStore } from "../../stores";
import Radar from "../../../../../../../components/Radar";
import "./index.less";
var checkGroup = [{
  checkType: 'successes',
  icon: 'check',
  text: 'checks passed'
}, {
  checkType: 'warnings',
  icon: 'priority_high',
  text: 'checks had warning'
}, {
  checkType: 'errors',
  icon: 'close',
  text: 'checks had errors'
}];
var categoryGroup = [{
  category_type: 'kubernetesVersion',
  name: 'Kubernetes版本',
  icon: 'saga_define'
}, {
  category_type: 'pods',
  name: 'Pods数量',
  icon: 'toll'
}, {
  category_type: 'nodes',
  name: '节点数量',
  icon: 'instance_outline'
}, {
  category_type: 'namespaces',
  name: '环境数量',
  icon: 'grain'
}];
var numberDetail = observer(function (_ref) {
  var isLoading = _ref.isLoading;

  var _useClusterMainStore = useClusterMainStore(),
      intlPrefix = _useClusterMainStore.intlPrefix,
      prefixCls = _useClusterMainStore.prefixCls;

  var _useClusterContentSto = useClusterContentStore(),
      formatMessage = _useClusterContentSto.formatMessage,
      polarisNumDS = _useClusterContentSto.polarisNumDS;

  useEffect(function () {}, []);

  function refresh() {}

  function renderNumPanel() {
    return checkGroup.map(function (item, key) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-number-check"),
        key: item.checkType
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: item.icon
      }), /*#__PURE__*/React.createElement("span", null, !isLoading ? polarisNumDS.current && (polarisNumDS.current.get(item.checkType) || 0) : '-', "\xA0", item.text));
    });
  }

  function renderDetailPanel() {
    return categoryGroup.map(function (item) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-number-category"),
        key: item.category_type
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: item.icon
      }), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-number-category-detail")
      }, /*#__PURE__*/React.createElement("span", null, item.name), /*#__PURE__*/React.createElement("span", null, polarisNumDS.current ? polarisNumDS.current.get(item.category_type) || '-' : '-')));
    });
  }

  function renderRadar() {
    var score = polarisNumDS.current && polarisNumDS.current.get('score');
    return /*#__PURE__*/React.createElement(Radar, {
      num: !isLoading ? score : null,
      loading: isLoading,
      failed: polarisNumDS.current && (polarisNumDS.current.get('status') === 'failed' || polarisNumDS.current.get('status') === 'timeout')
    });
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-number")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-number-left")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-number-leftTop")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-number-leftTop-lastestDate")
  }, formatMessage({
    id: "".concat(intlPrefix, ".polaris.lastedScanDate")
  }), polarisNumDS.current ? polarisNumDS.current.get('lastScanDateTime') : '-')), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-number-leftDown")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-number-leftDown-left")
  }, renderNumPanel()), renderRadar())), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-number-right")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-number-right-list")
  }, renderDetailPanel())));
});
export default numberDetail;