"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Accordion = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var core_1 = require("@blueprintjs/core");
var PANEL_HEADER_HEIGHT = 24;
function validatePanelId(panels, id) {
    if (!id) {
        return null;
    }
    var panel = panels.filter(function (p) { return p.id == id; })[0];
    if (panel) {
        return id;
    }
    return null;
}
/**
 * A generic, reusable Accordion component
 * @param props
 */
exports.Accordion = React.memo(function (props) {
    var style = props.style, panels = props.panels, isResizing = props.isResizing, onActivePanelChanged = props.onActivePanelChanged;
    var activeId = validatePanelId(props.panels, props.activePanelId);
    var _a = React.useState({
        width: -1,
        height: -1
    }), dim = _a[0], setDim = _a[1];
    var _b = React.useState(activeId || panels[panels.length - 1].id), openPanel = _b[0], setOpenPanel = _b[1];
    React.useEffect(function () {
        setOpenPanel(activeId || panels[panels.length - 1].id);
    }, [activeId]);
    var onResize = function (entries) {
        setDim(entries[0].contentRect);
    };
    var onTogglePanel = function (e) {
        var id = e.currentTarget.attributes["data-accordion-panel-id"].value;
        if (openPanel != id) {
            setOpenPanel(id);
            onActivePanelChanged === null || onActivePanelChanged === void 0 ? void 0 : onActivePanelChanged(id);
        }
    };
    return React.createElement(core_1.ResizeSensor, { onResize: onResize },
        React.createElement("div", { style: style, className: "component-accordion" }, panels.map(function (p) {
            var isOpen = (p.id == openPanel);
            return React.createElement("div", { key: p.id, className: "component-accordion-panel" },
                React.createElement("div", { className: "component-accordion-panel-header", style: { height: PANEL_HEADER_HEIGHT }, "data-accordion-panel-id": p.id, onClick: onTogglePanel },
                    React.createElement(core_1.Icon, { icon: isOpen ? "chevron-up" : "chevron-down" }),
                    " ",
                    p.title),
                React.createElement(core_1.Collapse, { isOpen: isOpen }, p.contentRenderer({ width: dim.width, height: (dim.height - (panels.length * PANEL_HEADER_HEIGHT)) }, isResizing)));
        })));
});
//# sourceMappingURL=accordion.js.map