import "choerodon-ui/lib/progress/style";
import _Progress from "@hzero-front-ui/c7n-ui/lib/Progress";
import "choerodon-ui/lib/tooltip/style";
import _Tooltip from "choerodon-ui/lib/tooltip";
import "choerodon-ui/lib/icon/style";
import _Icon from "choerodon-ui/lib/icon";

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 } from 'react';
import { observer } from 'mobx-react-lite';
import { runInAction } from 'mobx';
import PageTitle from "../../../../../components/page-title";
import { useResourceStore } from "../../../stores";
import "./index.less";

function ResourceTitle(props) {
  var record = props.record,
      iconType = props.iconType,
      statusKey = props.statusKey,
      errorKey = props.errorKey;

  var _useResourceStore = useResourceStore(),
      resourceStore = _useResourceStore.resourceStore,
      treeDs = _useResourceStore.treeDs,
      key = _useResourceStore.resourceStore.getSelectedMenu.key,
      formatMessage = _useResourceStore.intl.formatMessage;

  function getCurrent() {
    if (record) {
      var id = record.get('id');
      var name = record.get('name');
      var status = record.get(statusKey);
      var errorText = record.get(errorKey);
      return {
        id: id,
        name: name,
        status: status,
        errorText: errorText
      };
    }

    return null;
  }

  function getTitle() {
    var current = getCurrent();

    if (current) {
      var name = current.name,
          status = current.status,
          errorText = current.errorText;
      return /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-resource-title"
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: iconType,
        className: "c7ncd-resource-title-icon"
      }), /*#__PURE__*/React.createElement("span", {
        className: "c7ncd-resource-title-name"
      }, name), status === 'failed' && /*#__PURE__*/React.createElement(_Tooltip, {
        title: errorText || ''
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "error",
        className: "c7ncd-resource-title-error-icon"
      })), status === 'operating' && /*#__PURE__*/React.createElement(_Tooltip, {
        title: formatMessage({
          id: 'operating'
        })
      }, /*#__PURE__*/React.createElement(_Progress, {
        className: "c7ncd-resource-title-operating-icon",
        type: "loading",
        size: "small",
        width: 15
      })));
    }

    return null;
  }

  function getFallBack() {
    var _resourceStore$getSel = resourceStore.getSelectedMenu,
        name = _resourceStore$getSel.name,
        status = _resourceStore$getSel.status;
    return /*#__PURE__*/React.createElement("div", {
      className: "c7ncd-resource-title"
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: iconType,
      className: "c7ncd-resource-title-icon"
    }), /*#__PURE__*/React.createElement("span", null, name), status === 'failed' && /*#__PURE__*/React.createElement(_Icon, {
      type: "error",
      className: "c7ncd-resource-title-error-icon"
    }));
  }

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

    if (current) {
      var id = current.id,
          name = current.name,
          status = current.status;
      var menuItem = treeDs.find(function (item) {
        return item.get('key') === key && item.get('id') === id;
      });

      if (menuItem && (menuItem.get('name') !== name || menuItem.get('status') !== status)) {
        runInAction(function () {
          menuItem.set({
            name: name,
            status: status
          });
          resourceStore.setSelectedMenu(_objectSpread(_objectSpread({}, resourceStore.getSelectedMenu), current));
        });
      }
    }
  }, [record]);
  return /*#__PURE__*/React.createElement(PageTitle, {
    content: getTitle(),
    fallback: getFallBack()
  });
}

ResourceTitle.defaultProps = {
  statusKey: 'status',
  errorKey: 'error'
};
export default observer(ResourceTitle);