'use strict';

var React = require('react');
var useScrollToActive = require('./useScrollToActive-cjs.js');
require('./isObjectLike-cjs.js');
require('@jobber/hooks');
require('@jobber/design');
var classnames = require('classnames');
var floatingUi_react = require('./floating-ui.react-cjs.js');
var Text = require('./Text-cjs.js');
var Button = require('./Button-cjs.js');
var Spinner = require('./Spinner-cjs.js');
var Chip = require('./Chip-cjs.js');
require('./tslib.es6-cjs.js');

function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
    return (React.createElement(Chip.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 ? (_, ev) => onClick(ev) : undefined, label: label },
        prefix && React.createElement(Chip.Chip.Prefix, null, prefix),
        suffix && React.createElement(Chip.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.createElement(Button.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, } = useScrollToActive.useInternalChipDismissibleInput(props);
    const scrollableRef = useScrollToActive.useScrollToActive(activeIndex);
    const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();
    const { styles: floatingStyles, setFloatingRef } = useScrollToActive.useRepositionMenu(attachTo);
    React.useEffect(() => {
        handleDebouncedSearch(searchValue, options);
        return handleDebouncedSearch.cancel;
    }, [searchValue, options]);
    React.useEffect(() => {
        isInView && onLoadMore && onLoadMore(searchValue);
    }, [isInView]);
    if (!showInput) {
        return React.cloneElement(activator, { onClick: handleShowInput });
    }
    const shouldShowMenu = menuOpen && (hasAvailableOptions || isLoadingMore);
    const menuContent = (React.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.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.createElement("span", { "aria-hidden": true }, option.prefix),
            React.createElement(Text.Text, null, option.label)))),
        React.createElement("div", { ref: visibleChildRef }),
        isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
            React.createElement(Spinner.Spinner, { size: "small", inline: true })))));
    return (React.createElement(React.Fragment, null,
        React.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.createElement(floatingUi_react.FloatingPortal, null, menuContent)));
}

function InternalChipDismissible(props) {
    const { availableChipOptions, ref: wrapperRef, wrapperElement, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useScrollToActive.useInternalChipDismissible(props);
    return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
        sortedVisibleChipOptions.map(chip => (React.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.createElement(Chip.InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
        React.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 })));
}

exports.InternalChip = InternalChip;
exports.InternalChipDismissible = InternalChipDismissible;
