"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const useHeightCalculator_1 = tslib_1.__importDefault(require("../../gravity-blocks/hooks/useHeightCalculator.js"));
const utils_1 = require("../../utils/index.js");
const b = (0, utils_1.block)('foldable-block');
const Foldable = ({ isOpened, children, className, qa }) => {
    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa);
    const blockRef = React.useRef(null);
    const contentRef = React.useRef(null);
    const contentHeight = (0, useHeightCalculator_1.default)(contentRef);
    React.useEffect(() => {
        if (blockRef && blockRef.current) {
            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
        }
    }, [isOpened, contentHeight]);
    return ((0, jsx_runtime_1.jsx)("div", { ref: blockRef, className: b({ open: isOpened }, className), "data-qa": qaAttributes.default, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: b('content-container'), "data-qa": qaAttributes.container, children: children }) }));
};
exports.default = Foldable;
//# sourceMappingURL=Foldable.js.map
