import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { memo } from 'react';
import { Flow, tasty } from '@cube-dev/ui-kit';
import { Droppable } from 'react-beautiful-dnd';
import { PivotItem } from './Item';
const HeaderElement = tasty({
    styles: {
        display: 'grid',
        preset: 'h6',
        color: '#dark',
        placeContent: 'center',
        fill: '#light',
        padding: '8px 16px',
        border: 'bottom',
    },
});
const Header = memo(({ axis }) => {
    return _jsxs(HeaderElement, { children: [axis.toUpperCase(), " axis"] });
});
export function PivotDroppableArea({ pivotConfig, axis, }) {
    return (_jsxs(_Fragment, { children: [_jsx(Header, { axis: axis }), _jsx("div", { "data-testid": `pivot-popover-${axis}`, style: {
                    padding: '8px',
                }, children: _jsx(Droppable, { droppableId: axis, children: (provided) => (_jsxs(Flow, { ref: provided.innerRef, ...provided.droppableProps, gap: "1ow", children: [pivotConfig[axis].map((id, index) => {
                                let type = id.includes('.')
                                    ? id.split('.').length === 3
                                        ? 'timeDimension'
                                        : 'dimension'
                                    : 'measure';
                                return _jsx(PivotItem, { type: type, id: id, index: index }, id);
                            }), provided.placeholder] })) }) })] }));
}
//# sourceMappingURL=DroppableArea.js.map