import React, { useEffect, useRef, useState } from 'react';
import { Box, Input, listItemSelectBuilder, } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { TabsFilterState } from './TabsFilterState';
import { TabTotalDropdownOption } from '../TabTotal';
import { ALL_TAB_ITEM_ID } from './types';
import { SingleSelectFilterBase } from '../SingleSelectFilterBase';
import { useDropdownSelectFilterState } from '../../hooks';
function _TabsDropdown(props) {
    const { data: dataProp, items, filter, selectedId, popoverProps } = props;
    const { itemKey } = filter;
    const table = useToolbarCollectionContext();
    const container = useRef();
    const [state] = useState(() => new TabsFilterState({
        table,
    }));
    useEffect(() => state.init({
        container: container.current,
        itemsCount: items.length,
    }), []);
    const { isLoading, isIdle } = table.initTask.status;
    const hideCounterBadge = isLoading || isIdle;
    const options = React.useMemo(() => items.map((item) => listItemSelectBuilder({
        id: item.id,
        title: item.name,
        label: item.name,
        suffix: hideCounterBadge ? undefined : (React.createElement(TabTotalDropdownOption, { value: dataProp.find((data) => itemKey(data) === item.id) })),
    })), [items, hideCounterBadge]);
    const { dropdownSelect, init } = useDropdownSelectFilterState({
        filter,
    });
    useEffect(() => init(), []);
    return (React.createElement(Box, { minWidth: 140, maxWidth: 200, paddingLeft: "SP4" },
        React.createElement(SingleSelectFilterBase, { dataHook: "tabs-dropdown", filter: filter, dropdownSelect: dropdownSelect, options: options, disabled: !options.length, selectedId: selectedId, onSelect: (option) => {
                const tab = items.find((item) => item.id === option.id);
                if (tab) {
                    const values = tab.id === ALL_TAB_ITEM_ID
                        ? []
                        : [tab.value];
                    filter.refresh(values);
                }
            }, suffix: hideCounterBadge ? undefined : (React.createElement(Input.Affix, null,
                React.createElement(TabTotalDropdownOption, { key: selectedId, value: dataProp.find((value) => itemKey(value) === selectedId) }))), popoverProps: popoverProps })));
}
export const TabsDropdown = observer(_TabsDropdown);
//# sourceMappingURL=TabsDropdown.js.map