import React__default, { useEffect } from 'react';
import { a as useInternalChipDismissibleInput, d as useScrollToActive, b as useInView, c as useRepositionMenu, u as useInternalChipDismissible } from './useScrollToActive-es.js';
import './isObjectLike-es.js';
import '@jobber/hooks';
import '@jobber/design';
import classnames from 'classnames';
import { F as FloatingPortal } from './floating-ui.react-es.js';
import { T as Text } from './Text-es.js';
import { B as Button } from './Button-es.js';
import { S as Spinner } from './Spinner-es.js';
import { C as Chip, I as InternalChipButton } from './Chip-es.js';
import './tslib.es6-es.js';

function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick, label: label },
        prefix && React__default.createElement(Chip.Prefix, null, prefix),
        suffix && React__default.createElement(Chip.Suffix, null, suffix)));
}

var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};

function InternalChipDismissibleInput(props) {
    const { activator = React__default.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, showInput, generateDescendantId, handleBlur, handleFocus, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleShowInput, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
    const scrollableRef = useScrollToActive(activeIndex);
    const { ref: visibleChildRef, isInView } = useInView();
    const { styles: floatingStyles, setFloatingRef } = useRepositionMenu(attachTo);
    useEffect(() => {
        handleDebouncedSearch(searchValue, options);
        return handleDebouncedSearch.cancel;
    }, [searchValue, options]);
    useEffect(() => {
        isInView && onLoadMore && onLoadMore(searchValue);
    }, [isInView]);
    if (!showInput) {
        return React__default.cloneElement(activator, { onClick: handleShowInput });
    }
    const shouldShowMenu = menuOpen && (hasAvailableOptions || isLoadingMore);
    const menuContent = (React__default.createElement("div", { ref: node => {
            setFloatingRef(node);
            scrollableRef.current = node;
        }, role: "listbox", id: menuId, className: styles.menu, style: floatingStyles.float, "data-testid": "chip-menu" },
        allOptions.map((option, i) => (React__default.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
                [styles.activeOption]: activeIndex === i,
            }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
            React__default.createElement("span", { "aria-hidden": true }, option.prefix),
            React__default.createElement(Text, null, option.label)))),
        React__default.createElement("div", { ref: visibleChildRef }),
        isLoadingMore && (React__default.createElement("div", { className: styles.loadingIndicator },
            React__default.createElement(Spinner, { size: "small", inline: true })))));
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": shouldShowMenu, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: () => setTimeout(handleBlur, 200), onFocus: handleFocus, autoFocus: true }),
        shouldShowMenu && React__default.createElement(FloatingPortal, null, menuContent)));
}

function InternalChipDismissible(props) {
    const { availableChipOptions, ref: wrapperRef, wrapperElement, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
    return (React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
        sortedVisibleChipOptions.map(chip => (React__default.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React__default.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
        React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperElement, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore, onlyShowMenuOnSearch: props.onlyShowMenuOnSearch, autoSelectOnClickOutside: props.autoSelectOnClickOutside })));
}

export { InternalChipDismissible as I, InternalChip as a };
