import "choerodon-ui/pro/lib/table/style";
import _Table from "@hzero-front-ui/c7n-ui/lib/TablePro";
import React, { useCallback, useMemo } from 'react';
import TimePopover from "../../../../../components/timePopover";
import UserInfo from "../../../../../components/userInfo";
import { injectIntl } from 'react-intl';
import { observer } from 'mobx-react-lite';
import { get, map } from 'lodash';
import getDuration from "../../../../../utils/getDuration";
import "./index.less";
var Column = _Table.Column;

var PipelineTable = function PipelineTable(_ref) {
  var tableDs = _ref.tableDs,
      formatMessage = _ref.intl.formatMessage;
  var prefixCls = useMemo(function () {
    return 'c7ncd-reports-pipeline-table';
  }, []);
  var renderStatus = useCallback(function (_ref2) {
    var value = _ref2.value;
    return /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-status ").concat(prefixCls, "-status-").concat(value)
    }, formatMessage({
      id: value
    }));
  }, []);
  var renderViewId = useCallback(function (_ref3) {
    var value = _ref3.value;
    return "#".concat(value);
  }, []);
  var renderStages = useCallback(function (_ref4) {
    var value = _ref4.value;
    return get(value, 'length') ? /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-stages")
    }, map(value, function (item, index) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, index > 0 && /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-stages-item-line")
      }), /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-stages-item \n                ").concat(prefixCls, "-stages-item-").concat(get(item, 'status'))
      }));
    })) : '';
  }, []);
  var renderUsers = useCallback(function (_ref5) {
    var value = _ref5.value;
    var imageUrl = get(value, 'imageUrl');
    var name = get(value, 'realName') || '';
    var id = get(value, 'ldap') ? get(value, 'loginName') : get(value, 'email');
    return /*#__PURE__*/React.createElement(UserInfo, {
      name: name,
      id: id,
      avatar: imageUrl
    });
  }, []);
  var renderDuration = useCallback(function (_ref6) {
    var value = _ref6.value;
    return getDuration({
      value: value
    });
  }, []);
  var renderDate = useCallback(function (_ref7) {
    var value = _ref7.value;
    return /*#__PURE__*/React.createElement(TimePopover, {
      content: value
    });
  }, []);
  return /*#__PURE__*/React.createElement(_Table, {
    dataSet: tableDs,
    className: "".concat(prefixCls)
  }, /*#__PURE__*/React.createElement(Column, {
    name: "status",
    renderer: renderStatus
  }), /*#__PURE__*/React.createElement(Column, {
    name: "viewId",
    renderer: renderViewId
  }), /*#__PURE__*/React.createElement(Column, {
    name: "pipelineName",
    tooltip: 'overflow'
  }), /*#__PURE__*/React.createElement(Column, {
    name: "stageRecordVOS",
    renderer: renderStages
  }), /*#__PURE__*/React.createElement(Column, {
    name: "appServiceName",
    tooltip: 'overflow'
  }), /*#__PURE__*/React.createElement(Column, {
    name: "createdDate",
    renderer: renderDate
  }), /*#__PURE__*/React.createElement(Column, {
    name: "durationSeconds",
    renderer: renderDuration
  }), /*#__PURE__*/React.createElement(Column, {
    name: "iamUserDTO",
    renderer: renderUsers
  }));
};

export default injectIntl(observer(PipelineTable));