"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _tslib = require("tslib");

var _consoleComponents = require("@alicloud/console-components");

var _classnames = _interopRequireDefault(require("classnames"));

var _react = _interopRequireDefault(require("react"));

var _breadcrumb = _interopRequireDefault(require("../breadcrumb"));

var _collapse = _interopRequireDefault(require("../collapse"));

var _item = _interopRequireDefault(require("../info/item"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

;

var Header =
/** @class */
function (_super) {
  (0, _tslib.__extends)(Header, _super);

  function Header() {
    var _this = _super !== null && _super.apply(this, arguments) || this;

    _this.renderTitle = function (title, subTitle, status, statusText, statusStyle, breadcrumbLength, hasBackArrow, goBackFunc, statusClass) {
      var titleArea = [];

      if (!title) {
        return null;
      }

      hasBackArrow = hasBackArrow != undefined ? hasBackArrow : breadcrumbLength >= 3;

      if (hasBackArrow) {
        titleArea.push( /*#__PURE__*/_react["default"].createElement("span", {
          className: "lp-header-goback",
          key: "lp-header~goback"
        }, /*#__PURE__*/_react["default"].createElement(_consoleComponents.Icon, {
          type: "wind-arrow-left",
          onClick: goBackFunc
        })));
      }

      titleArea.push( /*#__PURE__*/_react["default"].createElement("span", {
        key: "lp-header-title",
        className: "lp-header-title"
      }, title));

      if (subTitle) {
        titleArea.push( /*#__PURE__*/_react["default"].createElement("span", {
          key: "lp-header-subTitle",
          className: "lp-header-subTitle"
        }, subTitle));
      }

      titleArea.push( /*#__PURE__*/_react["default"].createElement("span", {
        key: "lp-header-status-",
        style: statusStyle,
        className: (0, _classnames["default"])('lp-header-status ', 'lp-status-' + status, statusClass)
      }, statusText));
      return titleArea;
    };

    _this.renderBreadcrumb = function (breadcrumb, push) {
      return breadcrumb.length > 0 && /*#__PURE__*/_react["default"].createElement(_breadcrumb["default"], {
        dataSource: breadcrumb,
        separator: /*#__PURE__*/_react["default"].createElement("span", null, "/"),
        push: push
      });
    };

    _this.renderButtons = function (buttons) {
      return buttons && buttons.length > 0 && buttons.map(function (item, index) {
        if ( /*#__PURE__*/_react["default"].isValidElement(item)) {
          return /*#__PURE__*/_react["default"].cloneElement(item, {});
        } else {
          var className = (0, _classnames["default"])('lp-header-right-button', item.className);
          var title = item.title;
          delete item.title;
          return /*#__PURE__*/_react["default"].createElement(_consoleComponents.Button, (0, _tslib.__assign)({
            key: 'button' + index,
            type: index === 0 ? 'primary' : 'normal'
          }, item, {
            className: className
          }), title);
        }
      });
    };

    _this.renderInstructionText = function (instructionLine, instructionText) {
      return instructionText ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "lp-header-instruction"
      }, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
        maxLine: instructionLine,
        content: instructionText
      })) : null;
    };

    _this.renderTabs = function (tabs, attributes, attributesOption) {
      return tabs && tabs.length > 0 && /*#__PURE__*/_react["default"].createElement(_consoleComponents.Tab, {
        shape: "wrapped",
        className: "custom-tab"
      }, tabs.map(function (item, index) {
        return /*#__PURE__*/_react["default"].createElement(_consoleComponents.Tab.Item, {
          title: item.tab,
          key: item.key
        }, item.content ? item.content : /*#__PURE__*/_react["default"].createElement("div", {
          className: "lp-info-content"
        }, attributes && attributes[index] && attributes[index].map(function (item) {
          return /*#__PURE__*/_react["default"].createElement(_item["default"], (0, _tslib.__assign)({
            key: item.name + item.value + index + 'custom-tab',
            colsPerRow: item.colsPerRow ? item.colsPerRow : 2,
            titleMinWidth: item.titleMinWidth ? item.titleMinWidth : 120,
            finishEditFunc: attributesOption && attributesOption.finishEditFunc,
            clickFunc: attributesOption && attributesOption.onClick,
            changeFunc: attributesOption && attributesOption.onChange
          }, item));
        })));
      }));
    };

    return _this;
  }

  Header.prototype.render = function () {
    var _a = this.props,
        attributes = _a.attributes,
        attributesOption = _a.attributesOption,
        buttons = _a.buttons,
        _b = _a.breadcrumb,
        breadcrumb = _b === void 0 ? [] : _b,
        push = _a.push,
        title = _a.title,
        subTitle = _a.subTitle,
        status = _a.status,
        statusText = _a.statusText,
        tabs = _a.tabs,
        hasBackArrow = _a.hasBackArrow,
        goBackFunc = _a.goBackFunc,
        children = _a.children,
        instructionLine = _a.instructionLine,
        instructionText = _a.instructionText,
        isNest = _a.isNest,
        needTitleColon = _a.needTitleColon,
        statusClass = _a.statusClass,
        statusStyle = _a.statusStyle,
        style = _a.style,
        className = _a.className;
    var changPadding = hasBackArrow;

    if (changPadding === undefined) {
      changPadding = breadcrumb.length >= 3;
    }

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: (0, _classnames["default"])('lp-header', {
        'lp-nest-header': isNest
      }, className),
      style: style
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "lp-header-wrap"
    }, this.renderBreadcrumb(breadcrumb, push), /*#__PURE__*/_react["default"].createElement("div", {
      className: title ? changPadding ? 'lp-header-titleArea hadback' : 'lp-header-titleArea' : '',
      style: title && breadcrumb.length === 0 ? {
        marginTop: 16
      } : {}
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "titleContent"
    }, this.renderTitle(title, subTitle, status, statusText, statusStyle, breadcrumb.length, hasBackArrow, goBackFunc, statusClass), /*#__PURE__*/_react["default"].createElement("div", {
      className: "lp-header-right"
    }, this.renderButtons(buttons))), this.renderInstructionText(instructionLine, instructionText)), this.renderTabs(tabs, attributes, attributesOption)), tabs == undefined ? children ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "lp-header-content"
    }, children) : attributes && attributes.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
      className: "lp-header-content"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "lp-info-content"
    }, attributes.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement(_item["default"], (0, _tslib.__assign)({
        key: item.name + item.value + index,
        colsPerRow: item.colsPerRow ? item.colsPerRow : 2,
        titleMinWidth: item.titleMinWidth ? item.titleMinWidth : 120,
        finishEditFunc: attributesOption && attributesOption.finishEditFunc,
        onClick: attributesOption && attributesOption.onClick,
        onChange: attributesOption && attributesOption.onChange,
        needTitleColon: needTitleColon
      }, item));
    }))) : null);
  };

  return Header;
}(_react["default"].Component);

Header.defaultProps = {
  title: '',
  children: null,
  instructionLine: 1,
  needTitleColon: false
};
var _default = Header;
exports["default"] = _default;