"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpandableContainer = void 0;
var React = require("react");
var FontAwesome = require("react-fontawesome");
var classnames = require("classnames");
var PropTypes = require("prop-types");
var Button_1 = require("../Button/Button");
var FlexBox_1 = require("../flex/FlexBox");
var FlexItem_1 = require("../flex/FlexItem");
require("./ExpandableContainer.less");
var cssClass = {
    CONTAINER: "ExpandableContainer--container",
    HEADER: "ExpandableContainer--header",
    CONTENT: "ExpandableContainer--content",
    EXPAND_ICON: "ExpandableContainer--expandIcon",
};
exports.ExpandableContainer = function (_a) {
    var children = _a.children, className = _a.className, isExpanded = _a.isExpanded, onClick = _a.onClick, title = _a.title;
    return (React.createElement(FlexBox_1.default, { column: true, className: classnames(cssClass.CONTAINER, className) },
        React.createElement(Button_1.Button, { className: cssClass.HEADER, type: "linkPlain", onClick: onClick },
            React.createElement(FlexBox_1.default, { tabIndex: -1, alignItems: "center" },
                title,
                React.createElement(FlexItem_1.default, { grow: true }),
                React.createElement(FontAwesome, { className: cssClass.EXPAND_ICON, name: isExpanded ? "chevron-down" : "chevron-right" }))),
        isExpanded && React.createElement("div", { className: cssClass.CONTENT }, children)));
};
exports.ExpandableContainer.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    isExpanded: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    title: PropTypes.node,
};
