import "choerodon-ui/lib/spin/style";
import _Spin from "@hzero-front-ui/c7n-ui/lib/Spin";
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, { Fragment } from 'react';
import { FormattedMessage } from 'react-intl';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import { useResourceStore } from "../../../stores";
import { useCustomDetailStore } from "./stores";
import Modals from "./modals";
import StatusTags from "../../../../../components/status-tag";
import ResourceTitle from "../../components/resource-title";
import "./index.less";
var statusTagsStyle = {
  minWidth: 40,
  marginRight: 8,
  height: '0.16rem',
  lineHeight: '0.16rem'
};
var Content = observer(function () {
  var _useResourceStore = useResourceStore(),
      prefixCls = _useResourceStore.prefixCls,
      intlPrefix = _useResourceStore.intlPrefix;

  var _useCustomDetailStore = useCustomDetailStore(),
      detailDs = _useCustomDetailStore.detailDs,
      formatMessage = _useCustomDetailStore.intl.formatMessage;

  function renderService(_ref) {
    var path = _ref.path,
        serviceName = _ref.serviceName,
        servicePort = _ref.servicePort,
        serviceStatus = _ref.serviceStatus,
        domain = _ref.domain;
    return /*#__PURE__*/React.createElement("li", {
      className: "".concat(prefixCls, "-detail-section-li")
    }, /*#__PURE__*/React.createElement("table", {
      className: "detail-section-li-table"
    }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("td", {
      className: "td-width-30"
    }, /*#__PURE__*/React.createElement("span", {
      className: "detail-section-li-text"
    }, formatMessage({
      id: 'path'
    }), ":\xA0"), /*#__PURE__*/React.createElement("span", null, path)), /*#__PURE__*/React.createElement("td", {
      className: "detail-section-service"
    }, /*#__PURE__*/React.createElement("span", {
      className: "detail-section-li-text"
    }, formatMessage({
      id: 'network'
    }), ":\xA0"), /*#__PURE__*/React.createElement("div", {
      className: "detail-section-service"
    }, /*#__PURE__*/React.createElement(StatusTags, {
      colorCode: serviceStatus,
      name: formatMessage({
        id: serviceStatus
      }),
      style: statusTagsStyle
    }), /*#__PURE__*/React.createElement("span", null, serviceName))), /*#__PURE__*/React.createElement("td", {
      className: "td-width-20"
    }, /*#__PURE__*/React.createElement("span", {
      className: "detail-section-li-text"
    }, formatMessage({
      id: 'port'
    }), ":\xA0"), /*#__PURE__*/React.createElement("span", null, servicePort)), /*#__PURE__*/React.createElement("td", {
      className: "td-width-6px"
    }, /*#__PURE__*/React.createElement("a", {
      rel: "nofollow me noopener noreferrer",
      target: "_blank",
      href: "http://".concat(domain).concat(path)
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "".concat(intlPrefix, ".click.visit")
    }))))));
  }

  function renderAnno(value, key) {
    return /*#__PURE__*/React.createElement("li", {
      className: "".concat(prefixCls, "-detail-section-li")
    }, /*#__PURE__*/React.createElement(_Tooltip, {
      title: key
    }, /*#__PURE__*/React.createElement("span", {
      className: "ingress-detail-annotation"
    }, key)), /*#__PURE__*/React.createElement(_Tooltip, {
      title: /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-detail-section-li-tooltip")
      }, value),
      arrowPointAtCenter: true
    }, /*#__PURE__*/React.createElement("span", {
      className: "ingress-detail-annotation-value"
    }, value)));
  }

  function getContent() {
    var record = detailDs.current;
    var domain;
    var paths;
    var anno;

    if (record) {
      domain = record.get('domain');
      paths = record.get('pathList');
      anno = record.get('annotations');
    }

    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-detail-content-section-title")
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "routing"
    }), /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-detail-content-section-title-hover")
    }, "(Rules)")), /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-detail-content-section-name")
    }, /*#__PURE__*/React.createElement("span", null, domain)), /*#__PURE__*/React.createElement("ul", {
      className: "".concat(prefixCls, "-detail-section-ul")
    }, paths ? map(paths, function (item) {
      return renderService(_objectSpread(_objectSpread({}, item), {}, {
        domain: domain
      }));
    }) : '暂无数据')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-detail-content-section-title")
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "annotation"
    }), /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-detail-content-section-title-hover")
    }, "(Annotations)")), /*#__PURE__*/React.createElement("ul", {
      className: "".concat(prefixCls, "-detail-section-ul")
    }, anno ? map(anno, renderAnno) : '暂无数据')));
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-ingress-detail")
  }, /*#__PURE__*/React.createElement(ResourceTitle, {
    iconType: "language",
    record: detailDs.current
  }), /*#__PURE__*/React.createElement(_Spin, {
    spinning: detailDs.status === 'loading'
  }, getContent()), /*#__PURE__*/React.createElement(Modals, null));
});
export default Content;