import React from 'react';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { AddItem, Box, Divider, Heading, InfoIcon, SidePanel, Tooltip, } from '@wix/design-system';
import { useRafRender } from '../../hooks/useRafRender';
import { MultiLevelSortingList } from './MultiLevelSortingList';
import { ScrollableContent } from '../ScrollableContent';
import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
export function _MultiLevelSortingPanel(props) {
    const { state: table } = props;
    const { multiLevelSorting } = table;
    const { translate: t } = useWixPatternsContainer();
    const entered = useRafRender();
    if (!entered || !multiLevelSorting) {
        return null;
    }
    return (React.createElement(PatternsSidePanel, { dataHook: "multi-level-sorting-panel", width: "100%", onClose: () => {
            multiLevelSorting.reportSidePanelClose();
            table.sidePanel.close();
        } },
        React.createElement(SidePanel.Header, { title: React.createElement(Box, { gap: "SP1", verticalAlign: "middle" },
                React.createElement(Heading, { size: "small" }, t('cairo.table.advanced-sorting.button.tooltip')),
                React.createElement(InfoIcon, { size: "medium", content: t('cairo.table.advanced-sorting.title.tooltip') })), subtitle: t('cairo.table.advanced-sorting.subtitle') }),
        React.createElement(ScrollableContent, { dataHook: "multi-level-sorting-panel-scroll-container", overflowY: true, smooth: true },
            React.createElement(MultiLevelSortingList, { state: multiLevelSorting })),
        React.createElement(Tooltip, { dataHook: "multi-level-sorting-add-sort-tooltip", disabled: multiLevelSorting.hasAvailableSortingColumns, maxWidth: 400, content: t('cairo.table.advanced-sorting.disabled.cta.tooltip'), appendTo: "window", moveBy: { y: -24 } },
            React.createElement(Box, { direction: "vertical", width: "100%" },
                React.createElement(Divider, { direction: "horizontal" }),
                React.createElement(Box, { padding: "SP4" },
                    React.createElement(AddItem, { dataHook: "multi-level-sorting-add-sort", disabled: !multiLevelSorting.hasAvailableSortingColumns, onClick: () => {
                            multiLevelSorting.addSort({ manual: true });
                        } }, t('cairo.table.advanced-sorting.cta')))))));
}
export const MultiLevelSortingPanel = observer(_MultiLevelSortingPanel);
//# sourceMappingURL=MultiLevelSortingPanel.js.map