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 _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, useMemo, useRef, useCallback, useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import classnames from 'classnames';
import UserInfo from "../../../../../../../components/userInfo/UserInfo";
import { useResourceStore } from "../../../../../stores";
import { useInstanceStore } from "../../stores";
import "./index.less";
var ICON_TYPE_MAPPING = {
  failed: 'cancel',
  operating: 'timelapse',
  success: 'check_circle'
};

var OpCard = function OpCard(_ref) {
  var index = _ref.index,
      record = _ref.record,
      isActive = _ref.isActive,
      intlPrefix = _ref.intlPrefix,
      prefixCls = _ref.prefixCls,
      formatMessage = _ref.formatMessage,
      onClick = _ref.onClick,
      effectCommandId = _ref.effectCommandId;
  var podKeys = useMemo(function () {
    return ['type', 'createTime', 'status', 'loginName', 'realName', 'userImage', 'podEventVO'];
  }, []);

  var _map = map(podKeys, function (item) {
    return record.get(item);
  }),
      _map2 = _slicedToArray(_map, 6),
      type = _map2[0],
      createTime = _map2[1],
      status = _map2[2],
      loginName = _map2[3],
      realName = _map2[4],
      userImage = _map2[5];

  var commandId = record.get('commandId');
  var commandError = record.get('commandError');
  var cardClass = classnames({
    'operation-record-card': true,
    'operation-record-card-active': isActive
  });
  var handleClick = useCallback(function () {
    return onClick(commandId, index > 3);
  }, [commandId, index]);
  return /*#__PURE__*/React.createElement("div", {
    className: cardClass,
    onClick: handleClick
  }, /*#__PURE__*/React.createElement("div", {
    className: "operation-record-title"
  }, /*#__PURE__*/React.createElement(_Tooltip, {
    title: formatMessage({
      id: status
    })
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: ICON_TYPE_MAPPING[status],
    className: "".concat(prefixCls, "-cases-status-").concat(status)
  })), /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "".concat(intlPrefix, ".instance.cases.").concat(type)
  }), effectCommandId && effectCommandId === commandId && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-cases-record-effectCommand")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-cases-record-effectCommand-text")
  }, formatMessage({
    id: "".concat(intlPrefix, ".active")
  }))), commandError && status === 'failed' && /*#__PURE__*/React.createElement(_Tooltip, {
    title: commandError
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: "error",
    className: "".concat(prefixCls, "-cases-record-error")
  }))), /*#__PURE__*/React.createElement("div", {
    className: "operation-record-step"
  }, /*#__PURE__*/React.createElement("i", {
    className: "operation-record-icon"
  })), /*#__PURE__*/React.createElement("div", {
    className: "operation-record-user"
  }, /*#__PURE__*/React.createElement(UserInfo, {
    name: realName,
    id: loginName,
    avatar: userImage
  })), /*#__PURE__*/React.createElement("div", {
    className: "operation-record-time"
  }, createTime));
};

var OpRecord = observer(function (_ref2) {
  var handleClick = _ref2.handleClick,
      active = _ref2.active;
  var rowRef = useRef(null);

  var _useResourceStore = useResourceStore(),
      prefixCls = _useResourceStore.prefixCls,
      intlPrefix = _useResourceStore.intlPrefix,
      _useResourceStore$res = _useResourceStore.resourceStore.getSelectedMenu,
      id = _useResourceStore$res.id,
      parentId = _useResourceStore$res.parentId;

  var _useInstanceStore = useInstanceStore(),
      formatMessage = _useInstanceStore.intl.formatMessage,
      casesDs = _useInstanceStore.casesDs,
      baseDs = _useInstanceStore.baseDs;

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      cardActive = _useState2[0],
      setCardActive = _useState2[1];

  useEffect(function () {
    setCardActive(null);
  }, [id, parentId]);

  function handleRecordClick(commandId, isIgnore) {
    setCardActive(commandId);
    handleClick(commandId, isIgnore);
  }

  function renderOperation() {
    var realActive = cardActive || active;
    var isExist = casesDs.find(function (r) {
      return r.get('commandId') === realActive;
    });

    if (!realActive || !isExist) {
      var firstRecord = casesDs.get(0);
      realActive = firstRecord.get('commandId');
    }

    return /*#__PURE__*/React.createElement("div", {
      ref: rowRef,
      className: "cases-record-detail"
    }, casesDs.map(function (record, index) {
      var commandId = record.get('commandId');
      return /*#__PURE__*/React.createElement(OpCard, {
        index: index,
        key: commandId,
        isActive: realActive === commandId,
        formatMessage: formatMessage,
        record: record,
        prefixCls: prefixCls,
        intlPrefix: intlPrefix,
        onClick: handleRecordClick,
        effectCommandId: baseDs.current && baseDs.current.get('effectCommandId')
      });
    }));
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-cases-record")
  }, /*#__PURE__*/React.createElement("span", {
    className: "cases-record-title"
  }, formatMessage({
    id: "".concat(intlPrefix, ".instance.cases.record")
  })), renderOperation());
});
export default OpRecord;