import * as React from "react";
import * as FontAwesome from "react-fontawesome";
import * as classnames from "classnames";
import * as PropTypes from "prop-types";
import { Button } from "../Button/Button";
import FlexBox from "../flex/FlexBox";
import FlexItem from "../flex/FlexItem";
import "./ExpandableContainer.less";
var cssClass = {
    CONTAINER: "ExpandableContainer--container",
    HEADER: "ExpandableContainer--header",
    CONTENT: "ExpandableContainer--content",
    EXPAND_ICON: "ExpandableContainer--expandIcon",
};
export var ExpandableContainer = function (_a) {
    var children = _a.children, className = _a.className, isExpanded = _a.isExpanded, onClick = _a.onClick, title = _a.title;
    return (React.createElement(FlexBox, { column: true, className: classnames(cssClass.CONTAINER, className) },
        React.createElement(Button, { className: cssClass.HEADER, type: "linkPlain", onClick: onClick },
            React.createElement(FlexBox, { tabIndex: -1, alignItems: "center" },
                title,
                React.createElement(FlexItem, { grow: true }),
                React.createElement(FontAwesome, { className: cssClass.EXPAND_ICON, name: isExpanded ? "chevron-down" : "chevron-right" }))),
        isExpanded && React.createElement("div", { className: cssClass.CONTENT }, children)));
};
ExpandableContainer.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    isExpanded: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    title: PropTypes.node,
};
