import React, { useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Input, Loader, } from '@wix/design-system';
import { ViewsDropdownModals } from './ViewsDropdownModals';
import { classes, st } from './ViewsDropdown.st.css.js';
import { ManageViewPopover } from './ManageViewPopover';
import { buildCategoryOption, buildViewOption, getViewName, } from './viewsDropdownRenderHelpers';
import { AutoCompleteReadonly } from './AutoCompleteReadonly';
import { ViewsDropdownPrefix } from './ViewsDropdownPrefix';
import { useWixPatternsContainer } from '../..';
function _ViewsDropdown({ onSelect, dataHook, state, showTotal = true, dropdownWidth = '200px', ...dropdownProps }) {
    const container = useWixPatternsContainer();
    const { views: viewsState } = state;
    const { currentView, collection, localSearchState } = viewsState;
    const { filteredCategoriesWithViews } = localSearchState;
    const { translate: t } = collection;
    const showLoader = collection.result.status.isIdle || collection.result.status.isLoading;
    const viewsOptions = useMemo(() => {
        const { viewsWithoutCategory, categories } = filteredCategoriesWithViews;
        return [
            ...viewsWithoutCategory.map((view) => buildViewOption({ view, viewsState })),
            ...categories.flatMap((category) => [
                buildCategoryOption({ category, viewsState }),
                ...category.views.map((view) => buildViewOption({ view, viewsState })),
            ]),
        ];
    }, [filteredCategoriesWithViews, container.initTask.status]);
    const { options, fixedFooter } = showLoader
        ? {
            options: [],
            fixedFooter: (React.createElement(Box, { dataHook: "initial-loader", width: "100%", align: "center", verticalAlign: "middle", padding: "SP2" },
                React.createElement(Loader, { size: "small" }))),
        }
        : {
            options: viewsOptions,
            fixedFooter: undefined,
        };
    const { table: { collection: mainCollection }, } = state;
    const shouldShowTotal = showTotal &&
        (mainCollection.totalStatus === 'success' ||
            mainCollection.showRefreshLoader);
    return (React.createElement(Box, { dataHook: dataHook },
        React.createElement(Box, { width: dropdownWidth, direction: "vertical" },
            React.createElement(AutoCompleteReadonly, { emptyStateMessage: !showLoader && t('cairo.viewsDropdown.nothingMatches.text'), state: state.views.autoCompleteReadonlyState, value: localSearchState.inputValue, onChange: (e) => localSearchState.setInputValueAndScheduleSearch(e.target.value), clearInput: () => localSearchState.clearSearch(), dropdownWidth: dropdownWidth, popoverProps: { placement: 'bottom-start' }, ...dropdownProps, onInputClicked: (e) => {
                    state.viewsStateBIReporter.clickOnViewDropdownBI();
                    dropdownProps?.onInputClicked?.(e);
                }, fixedFooter: fixedFooter, border: "round", selectedId: currentView?.id, selectedLabel: currentView
                    ? getViewName({ view: currentView, viewsState })
                    : undefined, textOverflow: "ellipsis", prefix: React.createElement(ViewsDropdownPrefix, { state: state }), suffix: shouldShowTotal ? (React.createElement(Box, { className: "total-count" },
                    React.createElement(Input.Affix, null,
                        "(",
                        state.table.collection.result.total,
                        ")"))) : undefined, className: st(classes.root), dataHook: "collection-views-dropdown", onSelect: (option) => {
                    viewsState.events.emit('beforeSelectView');
                    const id = option.id.toString();
                    const view = viewsState.getView(id);
                    if (view) {
                        onSelect?.(view);
                        viewsState.selectView({ id });
                        viewsState.events.emit('afterSelectView', { view });
                    }
                    localSearchState.clearSearch();
                }, options: options, placeholder: t('cairo.viewDropdown.unsavedView.status') })),
        React.createElement(Box, { verticalAlign: "middle", paddingLeft: "SP2" },
            React.createElement(ManageViewPopover, { origin: "MainToolbar", state: state })),
        React.createElement(ViewsDropdownModals, { state: state })));
}
export const ViewsDropdown = observer(_ViewsDropdown);
//# sourceMappingURL=ViewsDropdown.js.map