import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Text, tasty, HierarchyIcon, Space } from '@cube-dev/ui-kit';
import { useRef } from 'react';
import { useShownMemberName } from '../hooks';
import { ChevronIcon } from '../icons/ChevronIcon';
import { InstanceTooltipProvider } from './InstanceTooltipProvider';
import { ListMemberButton } from './ListMemberButton';
import { FilteredLabel } from './FilteredLabel';
const HierarchyElement = tasty({
    styles: {
        display: 'flex',
        flow: 'column',
        gap: '1bw',
        Contents: {
            display: 'flex',
            position: 'relative',
            margin: '4x left',
            flow: 'column',
            gap: '1bw',
        },
        HierarchyLine: {
            position: 'absolute',
            inset: '0 auto 0 (1bw - 2x)',
            fill: '#dimension-active',
            width: '.25x',
            radius: true,
        },
        Extra: {
            display: 'grid',
        },
    },
});
export function HierarchyMember(props) {
    const { isOpen, onToggle, cube, memberViewType, member, filterString, children } = props;
    const textRef = useRef(null);
    const name = member.name.replace(`${cube.name}.`, '').trim();
    const title = 'title' in member ? member.title : undefined;
    const { shownMemberName } = useShownMemberName({
        cubeName: cube.name,
        cubeTitle: 'title' in cube ? cube.title : undefined,
        memberName: name,
        memberTitle: title,
        type: memberViewType,
    });
    return (_jsxs(HierarchyElement, { mods: { open: isOpen }, children: [_jsx(InstanceTooltipProvider, { name: name, fullName: member.name, type: "hierarchy", title: title, overflowRef: textRef, children: _jsx(ListMemberButton, { qa: "MemberButton", qaVal: member.name, icon: _jsx(HierarchyIcon, {}), "data-member": "dimension", onPress: () => onToggle?.(!isOpen, member.name), children: _jsxs(Space, { gap: ".75x", children: [_jsx(Text, { ref: textRef, ellipsis: true, children: filterString ? (_jsx(FilteredLabel, { text: shownMemberName, filter: filterString })) : (shownMemberName) }), _jsx(ChevronIcon, { direction: isOpen ? 'top' : 'bottom', color: "var(--dimension-text-color)" })] }) }) }), children && children.length ? (_jsxs("div", { "data-element": "Contents", children: [children, _jsx("div", { "data-element": "HierarchyLine" })] })) : null] }));
}
//# sourceMappingURL=HierarchyMember.js.map