'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useMemo, useRef, useState } from 'react';
import { Popup, PopupList } from '../Popup/index.js';
import './index.scss';
const baseClass = 'combobox';
/**
 * @internal
 * @experimental
 */ /**
 * @internal
 * @experimental
 */ /** Minimum number of entries required to show search */ /**
 * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.
 *
 * @internal - this component may be removed or receive breaking changes in minor releases.
 * @experimental
 */ export const Combobox = (props)=>{
    const { entries, minEntriesForSearch = 8, onSelect, onToggleClose, onToggleOpen, searchPlaceholder = 'Search...', ...popupProps } = props;
    const [searchValue, setSearchValue] = useState('');
    const isOpenRef = useRef(false);
    const searchInputRef = useRef(null);
    const filteredEntries = useMemo(()=>{
        if (!searchValue) {
            return entries;
        }
        const search = searchValue.toLowerCase();
        return entries.filter((entry)=>entry.name.toLowerCase().includes(search));
    }, [
        entries,
        searchValue
    ]);
    const showSearch = entries.length >= minEntriesForSearch;
    const hasResults = filteredEntries.length > 0;
    const handleToggleOpen = React.useCallback((active)=>{
        isOpenRef.current = active;
        if (active && showSearch) {
            setTimeout(()=>{
                searchInputRef.current?.focus();
            }, 100);
        }
        onToggleOpen?.(active);
    }, [
        showSearch,
        onToggleOpen
    ]);
    const handleToggleClose = React.useCallback(()=>{
        isOpenRef.current = false;
        setSearchValue('');
        onToggleClose?.();
    }, [
        onToggleClose
    ]);
    return /*#__PURE__*/ _jsxDEV(Popup, {
        ...popupProps,
        className: `${baseClass} ${popupProps.className || ''}`,
        onToggleClose: handleToggleClose,
        onToggleOpen: handleToggleOpen,
        render: ({ close })=>/*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__content`,
                children: [
                    showSearch && /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`,
                        children: /*#__PURE__*/ _jsxDEV("input", {
                            "aria-label": searchPlaceholder,
                            className: `${baseClass}__search-input`,
                            onChange: (e)=>setSearchValue(e.target.value),
                            placeholder: searchPlaceholder,
                            ref: searchInputRef,
                            type: "text",
                            value: searchValue
                        }, void 0, false, {
                            fileName: "src/elements/Combobox/index.tsx",
                            lineNumber: 94,
                            columnNumber: 15
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/elements/Combobox/index.tsx",
                        lineNumber: 91,
                        columnNumber: 13
                    }, void 0),
                    /*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
                        children: filteredEntries.map((entry, index)=>{
                            const handleClick = ()=>{
                                if (onSelect) {
                                    onSelect(entry);
                                }
                                close();
                            };
                            return /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__entry`,
                                onClick: handleClick,
                                onKeyDown: (e)=>{
                                    if (e.key === 'Enter' || e.key === ' ') {
                                        e.preventDefault();
                                        handleClick();
                                    }
                                },
                                role: "menuitem",
                                tabIndex: 0,
                                children: entry.Component
                            }, `${entry.name}-${index}`, false, {
                                fileName: "src/elements/Combobox/index.tsx",
                                lineNumber: 115,
                                columnNumber: 17
                            }, void 0);
                        })
                    }, void 0, false, {
                        fileName: "src/elements/Combobox/index.tsx",
                        lineNumber: 105,
                        columnNumber: 11
                    }, void 0)
                ]
            }, void 0, true, {
                fileName: "src/elements/Combobox/index.tsx",
                lineNumber: 89,
                columnNumber: 9
            }, void 0)
    }, void 0, false, {
        fileName: "src/elements/Combobox/index.tsx",
        lineNumber: 83,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map