import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ArrowRotateLeft } from '@gravity-ui/icons';
import { ArrowToggle, Button, Icon } from '@gravity-ui/uikit';
import _ from 'lodash';
import { formGeneratorCn } from "../../utils/cn.js";
import './FieldBase.css';
const b = 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 = (_jsxs("div", { className: b('title', { size: textSize }), children: [_jsx("span", { children: _.capitalize(title) }), onRefresh && (_jsx(Button, { className: b('button'), onClick: (e) => {
                            e.stopPropagation();
                            onRefresh(undefined);
                        }, view: 'flat', size: 'xs', children: _jsx(Icon, { data: ArrowRotateLeft, size: 14 }) }))] }));
            if (expandable) {
                return (
                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                _jsxs("div", { className: b('foldable'), onClick: () => setShowChildren(!showChildren), children: [defaultTitle, _jsx(ArrowToggle, { direction: showChildren ? 'bottom' : 'right', className: b('arrow-toggle') })] }));
            }
            return _jsx("div", { className: b('non-foldable'), children: defaultTitle });
        }
        return null;
    }, [expandable, showChildren, textSize, title, onRefresh]);
    return (_jsxs("div", { className: b({ expandable }, className), children: [title && _jsx("div", { className: b('top'), children: titleComponent }), (!title || showChildren) && (_jsx("div", { className: b('children', { expandable }), children: children }))] }));
};
export default FieldBase;
//# sourceMappingURL=FieldBase.js.map
