import "choerodon-ui/lib/spin/style";
import _Spin from "@hzero-front-ui/c7n-ui/lib/Spin";
import React, { Fragment } from 'react';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import keys from 'lodash/keys';
import { useResourceStore } from "../../../stores";
import { useNetworkDetailStore } from "./stores";
import Modals from "./modals";
import PodList from "./PodList";
import ResourceTitle from "../../components/resource-title";
import "./index.less";
var ServiceDetail = observer(function () {
  var _useResourceStore = useResourceStore(),
      intlPrefix = _useResourceStore.intlPrefix,
      prefixCls = _useResourceStore.prefixCls,
      formatMessage = _useResourceStore.intl.formatMessage;

  var _useNetworkDetailStor = useNetworkDetailStore(),
      baseInfoDs = _useNetworkDetailStor.baseInfoDs;

  function getPort(_ref) {
    var port = _ref.port,
        targetPort = _ref.targetPort,
        protocol = _ref.protocol;
    return /*#__PURE__*/React.createElement("ul", {
      className: "service-detail-port-list",
      key: port
    }, /*#__PURE__*/React.createElement("li", {
      className: "service-detail-port-item"
    }, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-port-item-text"
    }, port), formatMessage({
      id: 'port'
    })), /*#__PURE__*/React.createElement("li", {
      className: "service-detail-port-item service-detail-arrow-item"
    }, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-port-item-arrow"
    }, "\u2192")), /*#__PURE__*/React.createElement("li", {
      className: "service-detail-port-item"
    }, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-port-item-text"
    }, protocol), formatMessage({
      id: 'protocol'
    })), /*#__PURE__*/React.createElement("li", {
      className: "service-detail-port-item service-detail-arrow-item"
    }, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-port-item-arrow"
    }, "\u2192")), /*#__PURE__*/React.createElement("li", {
      className: "service-detail-port-item"
    }, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-port-item-text"
    }, targetPort), formatMessage({
      id: "".concat(intlPrefix, ".target.port")
    })));
  }

  function getBurden(_ref2) {
    var code = _ref2.code,
        status = _ref2.status,
        podCount = _ref2.podCount,
        podRunningCount = _ref2.podRunningCount,
        lastUpdateDate = _ref2.lastUpdateDate,
        objectVersionNumber = _ref2.objectVersionNumber;
    return /*#__PURE__*/React.createElement("ul", {
      className: "service-detail-load-list",
      key: code
    }, /*#__PURE__*/React.createElement("li", {
      className: "service-detail-load-item"
    }, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-load-item-code"
    }, code), /*#__PURE__*/React.createElement("span", {
      className: "service-detail-load-item-key"
    }, formatMessage({
      id: 'deployment'
    }))), /*#__PURE__*/React.createElement("li", {
      className: "service-detail-load-item"
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-load-item-key"
    }, formatMessage({
      id: 'status'
    }), ":"), /*#__PURE__*/React.createElement("div", {
      className: "service-detail-load-item-status"
    }, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-load-item-status-dot service-detail-load-item-status-dot-".concat(status)
    }), formatMessage({
      id: status
    }), /*#__PURE__*/React.createElement("span", null, "(", podRunningCount, "/", podCount, ")"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-load-item-key"
    }, formatMessage({
      id: 'updateDate'
    }), ":"), /*#__PURE__*/React.createElement("span", null, lastUpdateDate || '-'))), /*#__PURE__*/React.createElement("li", {
      className: "service-detail-load-item"
    }, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-load-item-key"
    }, formatMessage({
      id: "".concat(intlPrefix, ".change.number")
    }), ":"), /*#__PURE__*/React.createElement("span", null, objectVersionNumber || '-')));
  }

  function getEndpoints(endPoints) {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      className: "service-detail-endpoints"
    }, formatMessage({
      id: "".concat(intlPrefix, ".target.ip")
    }), ":"), /*#__PURE__*/React.createElement("span", null, keys(endPoints).join()));
  }

  function getPorts() {
    var record = baseInfoDs.current;
    var ports;
    var burden;
    var endPoints;

    if (record) {
      ports = record.get('config').ports;
      burden = record.get('target').instances;
      endPoints = record.get('target').endPoints;
    }

    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-detail-content-section-title")
    }, formatMessage({
      id: 'port'
    })), /*#__PURE__*/React.createElement("div", {
      className: "detail-content-section-detail"
    }, ports && ports.length ? map(ports, getPort) : formatMessage({
      id: 'nodata'
    })), burden && burden.length ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-detail-content-section-title")
    }, formatMessage({
      id: "".concat(intlPrefix, ".load")
    })), /*#__PURE__*/React.createElement("div", {
      className: "detail-content-section-detail"
    }, map(burden, getBurden))) : null, endPoints ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-detail-content-section-title")
    }, "Endpoints"), /*#__PURE__*/React.createElement("div", {
      className: "detail-content-section-detail"
    }, getEndpoints(endPoints))) : record && /*#__PURE__*/React.createElement(PodList, null));
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-service-detail")
  }, /*#__PURE__*/React.createElement(ResourceTitle, {
    record: baseInfoDs.current,
    iconType: "router"
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-service-detail-content")
  }, /*#__PURE__*/React.createElement(_Spin, {
    spinning: baseInfoDs.status === 'loading'
  }, getPorts())), /*#__PURE__*/React.createElement(Modals, null));
});
export default ServiceDetail;