"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 icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const lodash_1 = tslib_1.__importDefault(require("lodash"));
const cn_1 = require("../../utils/cn.js");
const b = (0, cn_1.formGeneratorCn)('field-base');
const FieldBase = ({ className, title, textSize = 's', children, expandable = false, onRefresh, }) => {
    const [showChildren, setShowChildren] = React.useState(!expandable);
    const titleComponent = React.useMemo(() => {
        if (title) {
            const defaultTitle = ((0, jsx_runtime_1.jsxs)("div", { className: b('title', { size: textSize }), children: [(0, jsx_runtime_1.jsx)("span", { children: lodash_1.default.capitalize(title) }), onRefresh && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), onClick: (e) => {
                            e.stopPropagation();
                            onRefresh(undefined);
                        }, view: 'flat', size: 'xs', children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowRotateLeft, size: 14 }) }))] }));
            if (expandable) {
                return (
                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                (0, jsx_runtime_1.jsxs)("div", { className: b('foldable'), onClick: () => setShowChildren(!showChildren), children: [defaultTitle, (0, jsx_runtime_1.jsx)(uikit_1.ArrowToggle, { direction: showChildren ? 'bottom' : 'right', className: b('arrow-toggle') })] }));
            }
            return (0, jsx_runtime_1.jsx)("div", { className: b('non-foldable'), children: defaultTitle });
        }
        return null;
    }, [expandable, showChildren, textSize, title, onRefresh]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ expandable }, className), children: [title && (0, jsx_runtime_1.jsx)("div", { className: b('top'), children: titleComponent }), (!title || showChildren) && ((0, jsx_runtime_1.jsx)("div", { className: b('children', { expandable }), children: children }))] }));
};
exports.default = FieldBase;
//# sourceMappingURL=FieldBase.js.map
