import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Text, tasty, FolderOpenFilledIcon, FolderFilledIcon } from '@cube-dev/ui-kit';
import { FilteredLabel } from './FilteredLabel';
const OpenButton = tasty(Button, {
    size: 'small',
    type: 'neutral',
    styles: {
        gridColumns: 'auto auto 1fr',
        placeContent: 'center start',
        placeItems: 'center start',
        color: '#dark',
    },
});
const FolderElement = tasty({
    styles: {
        display: 'flex',
        flow: 'column',
        gap: '1bw',
        Contents: {
            display: 'flex',
            hide: {
                '': false,
                empty: true,
            },
            position: 'relative',
            margin: '4x left',
            flow: 'column',
            gap: '1bw',
            padding: '0 0 .5x 0',
        },
        FolderLine: {
            position: 'absolute',
            inset: '0 auto .5x (1bw - 2x)',
            fill: '#border-opaque',
            width: '.25x',
            radius: true,
        },
        Extra: {
            display: 'grid',
        },
    },
});
export function Folder(props) {
    const { name, isOpen, onToggle, filterString, children } = props;
    return (_jsxs(FolderElement, { mods: { open: isOpen, empty: !children || !children?.length }, children: [_jsx(OpenButton, { icon: isOpen ? (_jsx(FolderOpenFilledIcon, { style: { color: 'var(--dark-03-color)' } })) : (_jsx(FolderFilledIcon, { style: { color: 'var(--dark-03-color)' } })), onPress: () => onToggle(!isOpen, name), children: _jsx(Text, { ellipsis: true, color: "#dark-02", children: filterString ? _jsx(FilteredLabel, { text: name, filter: filterString }) : name }) }), _jsxs("div", { "data-element": "Contents", children: [children, _jsx("div", { "data-element": "FolderLine" })] })] }));
}
//# sourceMappingURL=Folder.js.map