import { __assign, __extends } from "tslib";
import { Button, Icon, Tab } from '@alicloud/console-components';
import classnames from 'classnames';
import React from 'react';
import Breadcrumb from '../breadcrumb';
import Collapse from '../collapse';
import Item from '../info/item';
;
var Header = /** @class */ (function (_super) {
    __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(React.createElement("span", { className: "lp-header-goback", key: "lp-header~goback" },
                    React.createElement(Icon, { type: "wind-arrow-left", onClick: goBackFunc })));
            }
            titleArea.push(React.createElement("span", { key: "lp-header-title", className: "lp-header-title" }, title));
            if (subTitle) {
                titleArea.push(React.createElement("span", { key: "lp-header-subTitle", className: "lp-header-subTitle" }, subTitle));
            }
            titleArea.push(React.createElement("span", { key: "lp-header-status-", style: statusStyle, className: classnames('lp-header-status ', 'lp-status-' + status, statusClass) }, statusText));
            return titleArea;
        };
        _this.renderBreadcrumb = function (breadcrumb, push) {
            return (breadcrumb.length > 0 && (React.createElement(Breadcrumb, { dataSource: breadcrumb, separator: React.createElement("span", null, "/"), push: push })));
        };
        _this.renderButtons = function (buttons) {
            return (buttons &&
                buttons.length > 0 &&
                buttons.map(function (item, index) {
                    if (React.isValidElement(item)) {
                        return React.cloneElement(item, {});
                    }
                    else {
                        var className = classnames('lp-header-right-button', item.className);
                        var title = item.title;
                        delete item.title;
                        return (React.createElement(Button, __assign({ key: 'button' + index, type: index === 0 ? 'primary' : 'normal' }, item, { className: className }), title));
                    }
                }));
        };
        _this.renderInstructionText = function (instructionLine, instructionText) {
            return instructionText ? (React.createElement("div", { className: "lp-header-instruction" },
                React.createElement(Collapse, { maxLine: instructionLine, content: instructionText }))) : null;
        };
        _this.renderTabs = function (tabs, attributes, attributesOption) {
            return (tabs &&
                tabs.length > 0 && (React.createElement(Tab, { shape: "wrapped", className: "custom-tab" }, tabs.map(function (item, index) { return (React.createElement(Tab.Item, { title: item.tab, key: item.key }, item.content ? (item.content) : (React.createElement("div", { className: "lp-info-content" }, attributes &&
                attributes[index] &&
                attributes[index].map(function (item) {
                    return (React.createElement(Item, __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 (React.createElement("div", { className: classnames('lp-header', { 'lp-nest-header': isNest }, className), style: style },
            React.createElement("div", { className: "lp-header-wrap" },
                this.renderBreadcrumb(breadcrumb, push),
                React.createElement("div", { className: title ? changPadding ? 'lp-header-titleArea hadback' : 'lp-header-titleArea' : '', style: title && breadcrumb.length === 0 ? { marginTop: 16 } : {} },
                    React.createElement("div", { className: "titleContent" },
                        this.renderTitle(title, subTitle, status, statusText, statusStyle, breadcrumb.length, hasBackArrow, goBackFunc, statusClass),
                        React.createElement("div", { className: "lp-header-right" }, this.renderButtons(buttons))),
                    this.renderInstructionText(instructionLine, instructionText)),
                this.renderTabs(tabs, attributes, attributesOption)),
            tabs == undefined ? (children ? (React.createElement("div", { className: "lp-header-content" }, children)) : (attributes &&
                attributes.length > 0 && (React.createElement("div", { className: "lp-header-content" },
                React.createElement("div", { className: "lp-info-content" }, attributes.map(function (item, index) {
                    return (React.createElement(Item, __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.Component));
Header.defaultProps = {
    title: '',
    children: null,
    instructionLine: 1,
    needTitleColon: false
};
export default Header;
