import "choerodon-ui/lib/spin/style";
import _Spin from "@hzero-front-ui/c7n-ui/lib/Spin";
import "choerodon-ui/lib/tabs/style";
import _Tabs from "choerodon-ui/lib/tabs";

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, lazy, Suspense, useEffect, useMemo } from 'react';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';
import isEqual from 'lodash/isEqual';
import pick from 'lodash/pick';
import omit from 'lodash/omit';
import PageTitle from "../../../../../components/page-title";
import PodCircle from "../../components/pod-circle";
import Modals from "./modals";
import { useResourceStore } from "../../../stores";
import { useMainStore } from "../../stores";
import { useInstanceStore } from "./stores";
import "./index.less";
var TabPane = _Tabs.TabPane;
var Cases = /*#__PURE__*/lazy(function () {
  return import("./cases");
});
var Details = /*#__PURE__*/lazy(function () {
  return import("./details");
});
var PodsDetails = /*#__PURE__*/lazy(function () {
  return import("./pods-details");
});

var InstanceTitle = function InstanceTitle(_ref) {
  var podRunningCount = _ref.podRunningCount,
      podUnlinkCount = _ref.podUnlinkCount,
      status = _ref.status,
      name = _ref.name,
      errorText = _ref.errorText,
      versionName = _ref.versionName,
      formatMessage = _ref.formatMessage;
  var podSize = useMemo(function () {
    return {
      width: 22,
      height: 22
    };
  }, []);

  var _useResourceStore = useResourceStore(),
      prefixCls = _useResourceStore.prefixCls;

  var _useMainStore = useMainStore(),
      _useMainStore$podColo = _useMainStore.podColor,
      RUNNING_COLOR = _useMainStore$podColo.RUNNING_COLOR,
      PADDING_COLOR = _useMainStore$podColo.PADDING_COLOR;

  function getVersionName() {
    var message = '';

    switch (status) {
      case 'failed':
        message = formatMessage({
          id: 'deploy_failed'
        });
        break;

      case 'operating':
        message = formatMessage({
          id: 'pending'
        });
        break;

      default:
        break;
    }

    return message;
  }

  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PodCircle, {
    style: podSize,
    dataSource: [{
      name: 'running',
      value: podRunningCount,
      stroke: RUNNING_COLOR
    }, {
      name: 'unlink',
      value: podUnlinkCount,
      stroke: PADDING_COLOR
    }]
  }), /*#__PURE__*/React.createElement("span", {
    className: "c7ncd-page-title-text"
  }, name), /*#__PURE__*/React.createElement("span", {
    className: "c7ncd-page-title-version"
  }, "(", versionName || getVersionName(), ")"));
};

var InstanceContent = observer(function () {
  var _useResourceStore2 = useResourceStore(),
      prefixCls = _useResourceStore2.prefixCls,
      intlPrefix = _useResourceStore2.intlPrefix,
      resourceStore = _useResourceStore2.resourceStore,
      treeDs = _useResourceStore2.treeDs;

  var _useInstanceStore = useInstanceStore(),
      formatMessage = _useInstanceStore.intl.formatMessage,
      _useInstanceStore$tab = _useInstanceStore.tabs,
      CASES_TAB = _useInstanceStore$tab.CASES_TAB,
      DETAILS_TAB = _useInstanceStore$tab.DETAILS_TAB,
      PODS_TAB = _useInstanceStore$tab.PODS_TAB,
      istStore = _useInstanceStore.istStore,
      baseDs = _useInstanceStore.baseDs;

  var viewType = resourceStore.getViewType;
  var selectedKey = resourceStore.getSelectedMenu.key;

  function handleChange(key) {
    istStore.setTabKey(key);
  }

  function getCurrent() {
    var record = baseDs.current;

    if (record) {
      var id = record.get('id');
      var status = record.get('status');
      var name = record.get('code');
      var podRunningCount = record.get('podRunningCount');
      var podCount = record.get('podCount');
      var error = record.get('error');
      var versionName = record.get('effectCommandVersion');
      return {
        id: id,
        status: status,
        name: name,
        podRunningCount: podRunningCount,
        podCount: podCount,
        error: error,
        versionName: versionName
      };
    }

    return null;
  }

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

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

      if (menuItem) {
        var previous = pick(menuItem.toData(), ['status', 'name', 'podRunningCount', 'podCount']);
        var next = pick(current, ['status', 'name', 'podRunningCount', 'podCount']);

        if (!isEqual(previous, next)) {
          runInAction(function () {
            menuItem.set(next);
            resourceStore.setSelectedMenu(_objectSpread(_objectSpread({}, resourceStore.getSelectedMenu), next));
          });
        }
      }
    }
  });

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

    if (current) {
      var status = current.status,
          name = current.name,
          podRunningCount = current.podRunningCount,
          podCount = current.podCount,
          error = current.error,
          versionName = current.versionName;
      var podUnlinkCount = computeUnlinkPod(podCount, podRunningCount);
      return /*#__PURE__*/React.createElement(InstanceTitle, {
        status: status,
        name: name,
        podRunningCount: podRunningCount,
        podUnlinkCount: podUnlinkCount,
        errorText: error,
        versionName: versionName,
        formatMessage: formatMessage
      });
    }

    return null;
  }

  function getFallBack() {
    var _resourceStore$getSel = resourceStore.getSelectedMenu,
        name = _resourceStore$getSel.name,
        podRunningCount = _resourceStore$getSel.podRunningCount,
        podCount = _resourceStore$getSel.podCount;
    var podUnlinkCount = computeUnlinkPod(podCount, podRunningCount);
    return /*#__PURE__*/React.createElement(InstanceTitle, {
      name: name,
      podRunningCount: podRunningCount,
      podUnlinkCount: podUnlinkCount
    });
  }

  function chooseTab() {
    var detailsTab = /*#__PURE__*/React.createElement(TabPane, {
      key: DETAILS_TAB,
      tab: formatMessage({
        id: "".concat(intlPrefix, ".instance.tabs.details")
      })
    }, /*#__PURE__*/React.createElement(Suspense, {
      fallback: /*#__PURE__*/React.createElement(_Spin, null)
    }, /*#__PURE__*/React.createElement(Details, null)));
    var casesTab = /*#__PURE__*/React.createElement(TabPane, {
      key: CASES_TAB,
      tab: formatMessage({
        id: "".concat(intlPrefix, ".instance.tabs.cases")
      })
    }, /*#__PURE__*/React.createElement(Suspense, {
      fallback: /*#__PURE__*/React.createElement(_Spin, null)
    }, /*#__PURE__*/React.createElement(Cases, null)));

    if (viewType === 'instance') {
      return [casesTab, detailsTab];
    } else {
      return [detailsTab, casesTab];
    }
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-instance")
  }, /*#__PURE__*/React.createElement(PageTitle, {
    content: getTitle(),
    fallback: getFallBack()
  }), /*#__PURE__*/React.createElement(_Tabs, {
    className: "".concat(prefixCls, "-environment-tabs"),
    animated: false,
    activeKey: istStore.getTabKey,
    onChange: handleChange
  }, chooseTab(), /*#__PURE__*/React.createElement(TabPane, {
    key: PODS_TAB,
    tab: formatMessage({
      id: "".concat(intlPrefix, ".instance.tabs.pods")
    })
  }, /*#__PURE__*/React.createElement(Suspense, {
    fallback: /*#__PURE__*/React.createElement(_Spin, null)
  }, /*#__PURE__*/React.createElement(PodsDetails, null)))), /*#__PURE__*/React.createElement(Modals, null));
});

function computeUnlinkPod(all, run) {
  return all - run;
}

export default InstanceContent;