import React, { useEffect, useLayoutEffect, useMemo, useState, } from 'react';
import { Box } from '@wix/design-system';
import { runInAction } from 'mobx';
import { FilterContextProvider } from '../FilterContext';
import { observer } from 'mobx-react-lite';
import { TabTitle } from './TabTitle';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { TabsFilterState } from './TabsFilterState';
import { TabsDropdown } from './TabsDropdown';
import { ALL_TAB_ITEM_ID } from './types';
import { TabsDefault } from './TabsDefault';
import { useFilterValueTotalState } from '../TabTotal/useFilterValueTotalState';
function _TabsFilter(props) {
    const { type, filter, data: dataProp, all, counterBadge, placeAllTabLast, onChange, mobilePopoverProps, } = props;
    const { itemKey, itemName } = filter;
    const table = useToolbarCollectionContext();
    const filterAllValueTotal = useFilterValueTotalState({
        ...props,
        value: undefined,
    });
    const container = React.useRef();
    const [state] = useState(() => (table.tabs ??= new TabsFilterState({
        table,
    })));
    useLayoutEffect(() => {
        runInAction(() => {
            if (filter.persistent == null) {
                filter.persistent = true;
            }
        });
    }, []);
    const { responsive } = state;
    const isAllCounterBadgeLoading = useMemo(() => {
        const allStatus = filterAllValueTotal.totalsCollection.initTask.status;
        const { isLoading, isIdle } = allStatus;
        return isLoading || isIdle;
    }, [filterAllValueTotal.totalsCollection.initTask.status]);
    const isTableLoading = useMemo(() => {
        const { isLoading, isIdle } = table.initTask.status;
        return isLoading || isIdle;
    }, [table.initTask.status]);
    const hideCounterBadge = isTableLoading || isAllCounterBadgeLoading;
    const selectedId = filter.isEmpty
        ? ALL_TAB_ITEM_ID
        : itemKey(filter.value[0]);
    const items = useMemo(() => {
        const _mergedItems = dataProp.map((value, index) => {
            const id = itemKey(value);
            return {
                id,
                name: itemName(value),
                title: (React.createElement(TabTitle, { tabIndex: all && !placeAllTabLast ? index + 1 : index, state: responsive, text: itemName(value), value: value, active: selectedId === id, counterBadge: hideCounterBadge ? undefined : counterBadge })),
                value,
            };
        });
        if (!all) {
            return _mergedItems.map((item, index) => ({
                ...item,
                index,
                minWidth: responsive.itemsMinWidths[index],
                maxWidth: responsive.itemMaxWidth,
            }));
        }
        const allTabItem = {
            id: ALL_TAB_ITEM_ID,
            name: all,
            title: (React.createElement(TabTitle, { tabIndex: 0, state: responsive, text: all, value: undefined, active: selectedId === ALL_TAB_ITEM_ID, counterBadge: hideCounterBadge ? undefined : counterBadge })),
        };
        return (placeAllTabLast
            ? [..._mergedItems, allTabItem]
            : [allTabItem, ..._mergedItems]).map((item, index) => ({
            ...item,
            minWidth: responsive.itemsMinWidths[index],
            index,
        }));
    }, [
        dataProp,
        all,
        counterBadge,
        responsive.panelMinWidth,
        hideCounterBadge,
        selectedId,
    ]);
    useEffect(() => state.init({
        container: container.current,
        itemsCount: items.length,
    }), [container, state]);
    return (React.createElement(FilterContextProvider, { value: filter },
        React.createElement(Box, { ref: (node) => {
                if (node) {
                    container.current = node;
                }
            }, dataHook: "collection-tabs-filter", width: "100%", height: 60, direction: "vertical", verticalAlign: "middle", flexGrow: 1 }, responsive.mode === 'tabs' ? (React.createElement(TabsDefault, { items: items, data: dataProp, filter: filter, selectedId: selectedId, state: state, onChange: onChange, type: type, all: all })) : (React.createElement(TabsDropdown, { filter: filter, data: dataProp, items: items, selectedId: selectedId, popoverProps: mobilePopoverProps })))));
}
export const TabsFilter = observer(_TabsFilter);
TabsFilter.displayName = 'TabsFilter';
//# sourceMappingURL=TabsFilter.js.map