"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.cssClass = void 0;
var classnames = require("classnames");
var React = require("react");
var PropTypes = require("prop-types");
var FontAwesome = require("react-fontawesome");
var react_accessible_accordion_1 = require("react-accessible-accordion");
require("./InfoPanel.less");
var propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    title: PropTypes.node,
    hideTitle: PropTypes.bool,
    footer: PropTypes.node,
    collapsible: PropTypes.bool,
    defaultOpen: PropTypes.bool,
};
exports.cssClass = {
    CONTAINER: "InfoPanel",
    FOOTER: "InfoPanel--footer",
    TITLE: "InfoPanel--title",
    HEADER: "InfoPanel--header",
    CONTENT: "InfoPanel--content",
    COLLAPSE_ARROW: "InfoPanel--collapseArrow",
    COLLAPSIBLE_TITLE: "InfoPanel--collapsibleTitle",
    COLLAPSIBLE_HEADER: "InfoPanel--collapsibleHeader",
};
/**
 * Base presentational component for the displaying information in paneled format.
 */
var InfoPanel = /** @class */ (function (_super) {
    __extends(InfoPanel, _super);
    function InfoPanel(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isCollapsed: !props.defaultOpen,
        };
        return _this;
    }
    InfoPanel.prototype.toggleArrow = function (keys) {
        this.setState({ isCollapsed: !(typeof keys !== "undefined") });
    };
    InfoPanel.prototype.render = function () {
        var _this = this;
        var _a = this.props, children = _a.children, className = _a.className, hideTitle = _a.hideTitle, title = _a.title, footer = _a.footer, collapsible = _a.collapsible;
        var isCollapsed = this.state.isCollapsed;
        if (!collapsible) {
            return (React.createElement("div", { className: classnames(exports.cssClass.CONTAINER, className) },
                !hideTitle && (React.createElement("div", { className: exports.cssClass.HEADER },
                    React.createElement("h4", { className: exports.cssClass.TITLE }, title))),
                React.createElement("div", { className: exports.cssClass.CONTENT }, children),
                footer && React.createElement("div", { className: exports.cssClass.FOOTER }, footer)));
        }
        var collapseArrow;
        if (isCollapsed) {
            collapseArrow = "caret-right";
        }
        else {
            collapseArrow = "caret-down";
        }
        return (React.createElement("div", { className: classnames(exports.cssClass.CONTAINER, className) },
            React.createElement(react_accessible_accordion_1.Accordion, { onChange: function (keys) { return _this.toggleArrow(keys); } },
                React.createElement(react_accessible_accordion_1.AccordionItem, { expanded: !isCollapsed },
                    React.createElement(react_accessible_accordion_1.AccordionItemTitle, { className: exports.cssClass.COLLAPSIBLE_HEADER },
                        React.createElement("div", null,
                            React.createElement("div", { className: exports.cssClass.COLLAPSE_ARROW },
                                React.createElement(FontAwesome, { name: collapseArrow })),
                            React.createElement("div", { className: exports.cssClass.COLLAPSIBLE_TITLE }, title))),
                    React.createElement(react_accessible_accordion_1.AccordionItemBody, null,
                        React.createElement("div", { className: exports.cssClass.CONTENT }, children),
                        footer && React.createElement("div", { className: exports.cssClass.FOOTER }, footer))))));
    };
    InfoPanel.propTypes = propTypes;
    return InfoPanel;
}(React.Component));
exports.default = InfoPanel;
