import "choerodon-ui/pro/lib/button/style";
import _Button from "choerodon-ui/pro/lib/button";
import "choerodon-ui/pro/lib/tooltip/style";
import _Tooltip from "choerodon-ui/pro/lib/tooltip";
import "choerodon-ui/lib/icon/style";
import _Icon from "choerodon-ui/lib/icon";
import "choerodon-ui/lib/spin/style";
import _Spin from "@hzero-front-ui/c7n-ui/lib/Spin";
import "choerodon-ui/lib/collapse/style";
import _Collapse from "choerodon-ui/lib/collapse";
import "choerodon-ui/pro/lib/tabs/style";
import _Tabs from "choerodon-ui/pro/lib/tabs";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useState, Fragment, Suspense, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import isEmpty from 'lodash/isEmpty';
import { useClusterMainStore } from "../../../../stores";
import { useClusterContentStore } from "../../stores";
import ProgressBar from "../components/Progress";
import Tips from "../../../../../../../components/new-tips";
import "./index.less";
var TabPane = _Tabs.TabPane;
var Panel = _Collapse.Panel;
var collapseDetail = observer(function (_ref) {
  var loading = _ref.loading;

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

  var _useClusterContentSto = useClusterContentStore(),
      formatMessage = _useClusterContentSto.formatMessage,
      clusterSummaryDs = _useClusterContentSto.clusterSummaryDs,
      envDetailDs = _useClusterContentSto.envDetailDs;

  var _useState = useState('summary'),
      _useState2 = _slicedToArray(_useState, 2),
      collapseType = _useState2[0],
      setCollapseType = _useState2[1];

  var _useState3 = useState('cluster'),
      _useState4 = _slicedToArray(_useState3, 2),
      activeTab = _useState4[0],
      setActiveTab = _useState4[1];

  var clusterSummary = useMemo(function () {
    return ['healthCheck', 'imageCheck', 'networkCheck', 'resourceCheck', 'securityCheck'];
  }, []);
  var clusterSummaryData = useMemo(function () {
    if (clusterSummaryDs.current) {
      return clusterSummaryDs.current.toData();
    }

    return {};
  }, [clusterSummaryDs.current]);
  var isLoading = useMemo(function () {
    return loading || clusterSummaryDs.status === 'loading';
  }, [loading, clusterSummaryDs.status]);
  var buttonProps = useMemo(function () {
    return {
      color: 'primary',
      funcType: 'flat'
    };
  }, []);

  function handleRadioChange(value) {
    setCollapseType(value);
  }

  function getClusterHeader(item) {
    var checked = clusterSummaryData.checked;

    var _ref2 = clusterSummaryData[item] || {},
        score = _ref2.score,
        hasErrors = _ref2.hasErrors;

    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-polaris-tabs-header")
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-polaris-mgl-10")
    }, formatMessage({
      id: "".concat(intlPrefix, ".polaris.").concat(item)
    })), /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-polaris-tabs-header-score")
    }, formatMessage({
      id: "".concat(intlPrefix, ".polaris.score")
    }), ":"), isLoading ? /*#__PURE__*/React.createElement(_Spin, {
      spinning: true,
      className: "".concat(prefixCls, "-polaris-tabs-header-spin")
    }) : /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-polaris-tabs-header-number-").concat(checked)
    }, checked ? "".concat(score, "%") : '-'), !isLoading && hasErrors && /*#__PURE__*/React.createElement(_Icon, {
      type: "cancel",
      className: "".concat(prefixCls, "-polaris-tabs-header-error")
    }), /*#__PURE__*/React.createElement(ProgressBar, {
      loading: isLoading,
      num: isLoading || !checked ? null : score
    }));
  }

  function getEnvHeader(envRecord) {
    var _ref3 = envRecord || {},
        envName = _ref3.envName,
        namespace = _ref3.namespace,
        projectName = _ref3.projectName,
        hasErrors = _ref3.hasErrors;

    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-polaris-tabs-header")
    }, envName && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-polaris-tabs-header-item")
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-polaris-tabs-header-text")
    }, formatMessage({
      id: 'environment'
    }), ":"), /*#__PURE__*/React.createElement("span", null, envName), !isLoading && hasErrors && /*#__PURE__*/React.createElement(_Icon, {
      type: "cancel",
      className: "".concat(prefixCls, "-polaris-tabs-header-error")
    })), /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-polaris-tabs-header-item").concat(!projectName ? '-external' : '')
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-polaris-tabs-header-text")
    }, formatMessage({
      id: 'envCode'
    }), ":"), /*#__PURE__*/React.createElement("span", null, namespace), !isLoading && !envName && hasErrors && /*#__PURE__*/React.createElement(_Icon, {
      type: "cancel",
      className: "".concat(prefixCls, "-polaris-tabs-header-error")
    })), projectName && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-polaris-tabs-header-item")
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-polaris-tabs-header-text")
    }, formatMessage({
      id: "".concat(intlPrefix, ".belong.project")
    }), ":"), /*#__PURE__*/React.createElement(_Tooltip, {
      title: projectName
    }, /*#__PURE__*/React.createElement("span", null, projectName))));
  }

  function getClusterContent(item) {
    var checked = clusterSummaryData.checked;

    var _ref4 = clusterSummaryData[item] || {},
        detail = _ref4.detail;

    var list = detail ? JSON.parse(detail) : [];

    if (isLoading) {
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-polaris-tabs-content")
      }, formatMessage({
        id: "".concat(intlPrefix, ".polaris.check.operating")
      }));
    }

    if (!checked) {
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-polaris-tabs-content")
      }, formatMessage({
        id: "".concat(intlPrefix, ".polaris.check.null")
      }));
    }

    if (isEmpty(list)) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-polaris-tabs-content")
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "done",
        className: "".concat(prefixCls, "-polaris-tabs-content-icon-success")
      }), /*#__PURE__*/React.createElement("span", null, formatMessage({
        id: "".concat(intlPrefix, ".polaris.check.success")
      })));
    }

    return map(list, function (_ref5, index) {
      var namespace = _ref5.namespace,
          resourceKind = _ref5.resourceKind,
          resourceName = _ref5.resourceName,
          hasErrors = _ref5.hasErrors,
          items = _ref5.items;
      return /*#__PURE__*/React.createElement("div", {
        key: "".concat(namespace, "-").concat(index),
        className: "".concat(prefixCls, "-polaris-tabs-content")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-polaris-tabs-content-title")
      }, /*#__PURE__*/React.createElement("span", null, "NameSpace: ".concat(namespace, " / ").concat(resourceKind, ": ").concat(resourceName)), hasErrors && /*#__PURE__*/React.createElement(_Icon, {
        type: "cancel",
        className: "".concat(prefixCls, "-polaris-tabs-header-error")
      })), map(items, function (_ref6, itemIndex) {
        var message = _ref6.message,
            type = _ref6.type,
            severity = _ref6.severity;
        return /*#__PURE__*/React.createElement("div", {
          key: "".concat(type, "-").concat(itemIndex),
          className: "".concat(prefixCls, "-polaris-tabs-content-des")
        }, /*#__PURE__*/React.createElement(_Icon, {
          type: severity === 'warning' ? 'priority_high' : 'close',
          className: "".concat(prefixCls, "-polaris-tabs-content-icon-").concat(severity)
        }), /*#__PURE__*/React.createElement("span", null, message));
      }));
    });
  }

  function getEnvContent(envRecord) {
    var _ref7 = envRecord || {},
        checked = _ref7.checked,
        detailJson = _ref7.detailJson;

    var list = detailJson ? JSON.parse(detailJson) : [];

    if (isLoading) {
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-polaris-tabs-content")
      }, formatMessage({
        id: "".concat(intlPrefix, ".polaris.check.operating")
      }));
    }

    if (!checked) {
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-polaris-tabs-content")
      }, formatMessage({
        id: "".concat(intlPrefix, ".polaris.check.null")
      }));
    }

    if (isEmpty(list)) {
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-polaris-tabs-content")
      }, formatMessage({
        id: "".concat(intlPrefix, ".polaris.check.empty")
      }));
    }

    return map(list, function (_ref8, index) {
      var hasErrors = _ref8.hasErrors,
          kind = _ref8.kind,
          name = _ref8.name,
          podResult = _ref8.podResult;
      var containers = podResult ? podResult.containerResults : [];
      var results = podResult ? podResult.results : {};
      return /*#__PURE__*/React.createElement("div", {
        key: "".concat(name, "-").concat(index),
        className: "".concat(prefixCls, "-polaris-tabs-content")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-polaris-tabs-content-title-weight")
      }, /*#__PURE__*/React.createElement("span", null, "".concat(kind, ": ").concat(name)), hasErrors && /*#__PURE__*/React.createElement(_Icon, {
        type: "cancel",
        className: "".concat(prefixCls, "-polaris-tabs-header-error")
      })), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-polaris-tabs-content-title")
      }, /*#__PURE__*/React.createElement("span", null, "Pod Spec:")), isEmpty(results) ? /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-polaris-tabs-content-env")
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "done",
        className: "".concat(prefixCls, "-polaris-tabs-content-icon-success")
      }), /*#__PURE__*/React.createElement("span", null, formatMessage({
        id: "".concat(intlPrefix, ".polaris.check.success")
      }))) : map(results, function (_ref9, resultIndex) {
        var message = _ref9.message,
            type = _ref9.type,
            severity = _ref9.severity;
        return /*#__PURE__*/React.createElement("div", {
          key: "".concat(type, "-").concat(resultIndex),
          className: "".concat(prefixCls, "-polaris-tabs-content-des")
        }, /*#__PURE__*/React.createElement(_Icon, {
          type: severity === 'warning' ? 'priority_high' : 'close',
          className: "".concat(prefixCls, "-polaris-tabs-content-icon-").concat(severity)
        }), /*#__PURE__*/React.createElement("span", null, message));
      }), map(containers, function (_ref10) {
        var containerName = _ref10.name,
            containerResults = _ref10.results;
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-polaris-tabs-content-title"),
          key: containerName
        }, /*#__PURE__*/React.createElement("span", null, "Container: ".concat(containerName))), isEmpty(containerResults) ? /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-polaris-tabs-content-env")
        }, /*#__PURE__*/React.createElement(_Icon, {
          type: "done",
          className: "".concat(prefixCls, "-polaris-tabs-content-icon-success")
        }), /*#__PURE__*/React.createElement("span", null, formatMessage({
          id: "".concat(intlPrefix, ".polaris.check.success")
        }))) : map(containerResults, function (_ref11, containerIndex) {
          var message = _ref11.message,
              type = _ref11.type,
              severity = _ref11.severity;
          return /*#__PURE__*/React.createElement("div", {
            key: "".concat(type, "-").concat(containerIndex),
            className: "".concat(prefixCls, "-polaris-tabs-content-des")
          }, /*#__PURE__*/React.createElement(_Icon, {
            type: severity === 'warning' ? 'priority_high' : 'close',
            className: "".concat(prefixCls, "-polaris-tabs-content-icon-").concat(severity)
          }), /*#__PURE__*/React.createElement("span", null, message));
        }));
      }));
    });
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-polaris-wrap-collapse")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-polaris-tabs-btns")
  }, /*#__PURE__*/React.createElement(_Button, Object.assign({}, buttonProps, {
    onClick: function onClick() {
      return setActiveTab('cluster');
    },
    className: "".concat(prefixCls, "-polaris-tabs-btns-btn ").concat(activeTab === 'cluster' ? "".concat(prefixCls, "-polaris-tabs-btns-btn-active") : '')
  }), formatMessage({
    id: "".concat(intlPrefix, ".polaris.cluster")
  })), /*#__PURE__*/React.createElement(_Button, Object.assign({}, buttonProps, {
    onClick: function onClick() {
      return setActiveTab('env');
    },
    className: "".concat(prefixCls, "-polaris-tabs-btns-btn ").concat(activeTab === 'env' ? "".concat(prefixCls, "-polaris-tabs-btns-btn-active") : '')
  }), formatMessage({
    id: "".concat(intlPrefix, ".polaris.env")
  }))), activeTab === 'cluster' ? /*#__PURE__*/React.createElement(_Collapse, {
    bordered: false,
    className: "".concat(prefixCls, "-polaris-tabs-collapse-mgt")
  }, map(clusterSummary, function (item) {
    return /*#__PURE__*/React.createElement(Panel, {
      header: getClusterHeader(item),
      key: item
    }, getClusterContent(item));
  })) : [/*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-polaris-tabs-collapse-title")
  }, formatMessage({
    id: "".concat(intlPrefix, ".env.internal")
  })), envDetailDs.current && !isEmpty(envDetailDs.current.get('internal')) ? /*#__PURE__*/React.createElement(_Collapse, {
    bordered: false,
    className: "".concat(prefixCls, "-polaris-tabs-collapse")
  }, map(envDetailDs.current.get('internal'), function (envRecord) {
    return /*#__PURE__*/React.createElement(Panel, {
      header: getEnvHeader(envRecord),
      key: envRecord.id
    }, getEnvContent(envRecord));
  })) : /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-polaris-empty-text")
  }, formatMessage({
    id: 'empty.title.env'
  })), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-polaris-tabs-collapse-title")
  }, formatMessage({
    id: "".concat(intlPrefix, ".env.external")
  })), envDetailDs.current && !isEmpty(envDetailDs.current.get('external')) ? /*#__PURE__*/React.createElement(_Collapse, {
    bordered: false,
    className: "".concat(prefixCls, "-polaris-tabs-collapse")
  }, map(envDetailDs.current.get('external'), function (envRecord, index) {
    return /*#__PURE__*/React.createElement(Panel, {
      header: getEnvHeader(envRecord),
      key: "".concat(envRecord.namespace, "-").concat(index)
    }, getEnvContent(envRecord));
  })) : /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-polaris-empty-text")
  }, formatMessage({
    id: 'empty.title.env'
  }))]);
});
export default collapseDetail;