import { Accordion, SidePanel, WixStyleReactDefaultsOverrideProvider } from '@wix/design-system';
import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useBuildAccordionItems } from '../../hooks/useBuildAccordionItems';
import { FiltersPanelFooter } from './FiltersPanelFooter';
import { FilterRenderingContextProvider } from '../FilterRenderingContext';
import { FiltersPanelState } from './FiltersPanelState';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useRafRender } from '../../hooks/useRafRender';
import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
function _FiltersPanel(props) {
    const { state, children, ...rest } = props;
    const { toolbar, totalInlineFilters: { value: totalInlineFilters }, } = state;
    const accordionItems = useBuildAccordionItems(state);
    const entered = useRafRender();
    const { translate: t } = useWixPatternsContainer();
    const [filtersPanelState] = useState(() => new FiltersPanelState({
        toolbar,
    }));
    const [filterRenderingContext] = useState(() => ({
        location: 'panel',
    }));
    const [wsrDefaults] = useState(() => ({
        input: {
            size: 'small',
        },
        button: {
            size: 'small',
        },
    }));
    if (!entered) {
        return null;
    }
    let child = (React.createElement(PatternsSidePanel, { dataHook: "filters-side-panel", onClose: filtersPanelState.onCloseButtonClick, width: "100%", closeButtonProps: {
            ariaLabel: t('cairo.filtersPanel.header.closeButton.ariaLabel'),
        }, ...rest },
        React.createElement(SidePanel.Header, { title: state.panelTitle.value ??
                (totalInlineFilters != null
                    ? t('cairo.filtersPanel.header', {
                        num: totalInlineFilters,
                    })
                    : undefined) }),
        React.createElement("div", { "data-hook": "filters-panel-scroll-container", style: { overflowY: 'auto' } },
            React.createElement(Accordion, { dataHook: "filters-panel-accordion", skin: "light", hideShadow: true, multiple: true, items: accordionItems })),
        React.createElement(SidePanel.Footer, { noPadding: true },
            React.createElement(FiltersPanelFooter, { state: toolbar, onClearButtonClicked: state.onClearButtonClicked })),
        children));
    child = (React.createElement(FilterRenderingContextProvider, { value: filterRenderingContext }, child));
    child = (React.createElement(WixStyleReactDefaultsOverrideProvider, { value: wsrDefaults }, child));
    return child;
}
export const FiltersPanel = observer(_FiltersPanel);
//# sourceMappingURL=FiltersPanel.js.map