import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Draggable } from 'react-beautiful-dnd';
import { DragOutlined } from '@ant-design/icons';
import { tasty } from '@cube-dev/ui-kit';
import { MemberLabelText } from '../components/MemberLabelText';
import { MemberBadge } from '../components/Badge';
const PivotItemElement = tasty({
    styles: {
        display: 'grid',
        flow: 'row',
        gridColumns: 'min-content 1fr',
        gap: '1x',
        placeContent: 'center start',
        placeItems: 'center stretch',
        radius: true,
        padding: '.5x 1x',
        preset: 't3m',
        color: {
            '': '#dark',
            '[data-type="dimension"]': '#dimension-text',
            '[data-type="measure"]': '#measure-text',
            '[data-type="time-dimension"]': '#time-dimension-text',
        },
        fill: {
            '': '#dark.15',
            '[data-type="dimension"]': '#dimension-hover',
            '[data-type="measure"]': '#measure-hover',
            '[data-type="timeDimension"]': '#time-dimension-hover',
        },
    },
});
export function PivotItem({ id, index, type, }) {
    return (_jsx(Draggable, { draggableId: id, index: index, children: ({ draggableProps, dragHandleProps, innerRef }) => {
            const arr = id.split('.');
            return (
            // <TooltipProvider activeWrap title={id} tooltipStyles={{ width: 'auto' }}>
            _jsxs(PivotItemElement, { ref: innerRef, "data-type": type, ...draggableProps, ...dragHandleProps, style: draggableProps.style, children: [_jsx(DragOutlined, {}), _jsx(MemberLabelText, { "data-member": type, children: arr.length > 1 ? (_jsxs(_Fragment, { children: [_jsxs("span", { "data-element": "Name", children: [_jsx("span", { "data-element": "CubeName", children: arr[0] }), _jsx("span", { "data-element": "Divider", children: "." }), _jsx("span", { "data-element": "MemberName", children: arr[1] })] }), arr[2] ? (_jsx("span", { "data-element": "Grouping", children: _jsx(MemberBadge, { isSpecial: true, type: type, children: arr[2] }) })) : null] })) : (_jsx("span", { "data-element": "MemberName", children: id })) })] })
            // </TooltipProvider>
            );
        } }));
}
//# sourceMappingURL=Item.js.map