import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { ColumnarMenu, ColumnarMenuList } from '@essex/themed-components';
import { IconButton } from '@fluentui/react';
import { memo, useCallback } from 'react';
import { ContextualMenuItemSearchBox } from '../controls/index.js';
import { useSearchableItems, useSelectedOption } from './StepSelector.hooks.js';
import { Container, icons, SearchContainer } from './StepSelector.styles.js';
/**
 * Creates a custom step selection dropdown.
 * If "showButton" is true, a + icon will appear next to the dropdown,
 * and onChange will only fire when it is clicked.
 */ export const StepSelector = /*#__PURE__*/ memo(function StepSelector({ onCreate , showButton , verb , placeholder ='Choose a verb' ,  }) {
    const { text , onButtonClick , onItemClick  } = useSelectedOption(verb, onCreate, showButton, placeholder);
    const { items , filtered , onSearch , onSearchReset  } = useSearchableItems();
    const renderMenuList = useCallback((menuListProps)=>{
        return /*#__PURE__*/ _jsxs(_Fragment, {
            children: [
                /*#__PURE__*/ _jsx(SearchContainer, {
                    children: /*#__PURE__*/ _jsx(ContextualMenuItemSearchBox, {
                        items: items,
                        onSearch: onSearch
                    })
                }),
                menuListProps ? /*#__PURE__*/ _jsx(ColumnarMenuList, {
                    ...menuListProps
                }) : null
            ]
        });
    }, [
        onSearch,
        items
    ]);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(ColumnarMenu, {
                text: text,
                items: filtered,
                onRenderMenuList: renderMenuList,
                onItemClick: onItemClick,
                onDismiss: onSearchReset
            }),
            showButton && /*#__PURE__*/ _jsx(IconButton, {
                iconProps: icons.add,
                onClick: onButtonClick
            })
        ]
    });
});
